Dropdown Menu

"use client";
import { useState } from "react";
import { ChevronDown } from "lucide-react";

export function DropdownMenu({ items }: { items: { label: string; onClick: () => void }[] }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="relative">
      <button onClick={() => setOpen(!open)} className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm">
        Options <ChevronDown className={`size-4 transition-transform ${open ? "rotate-180" : ""}`} />
      </button>
      {open && (
        <>
          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
          <div className="absolute right-0 top-full z-20 mt-1 w-40 rounded-lg border border-border bg-card py-1 shadow-lg animate-[fadeIn_0.15s_ease-out]">
            {items.map((item, i) => (
              <button key={i} onClick={() => { item.onClick(); setOpen(false); }}
                className="w-full px-4 py-2 text-left text-sm hover:bg-muted">{item.label}</button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}