import { useState } from "react"
import * as Dialog from "@radix-ui/react-dialog"
import { motion } from "framer-motion"
import { Search } from "lucide-react"
import { useAccountSearch } from "@/lib/api/account"
import { cn } from "@/lib/cn"
export function SearchPanel() {
const [open, setOpen] = useState(false)
const { data, isLoading } = useAccountSearch()
return (
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Trigger
className={cn(
"inline-flex items-center gap-2 rounded-md",
"border border-zinc-200 bg-white px-3 py-1.5 text-sm",
"hover:bg-zinc-50"
)}
>
<Search className="size-4" />
Search…
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay asChild>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 0.5 }} />
</Dialog.Overlay>
</Dialog.Portal>
</Dialog.Root>
)
}