import { Search } from "lucide-react";

function EmptyConversations({ query }) {
  const filtering = !!query.trim();

  return (
    <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
      <div className="w-14 h-14 rounded-full bg-surface border border-line inline-flex items-center justify-center mb-4 text-fg-tertiary">
        <Search size={20} strokeWidth={1.75} />
      </div>
      <div className="text-fg font-medium text-sm">
        {filtering ? "No conversations match" : "No conversations yet"}
      </div>
      <div className="text-fg-tertiary text-[12px] font-mono mt-1">
        {filtering
          ? "Try another search or start a new direct conversation."
          : "Start your first direct conversation."}
      </div>
    </div>
  );
}

window.EmptyConversations = EmptyConversations;