Multi Select

import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectEmpty,
  MultiSelectFooter,
  MultiSelectItem,
  MultiSelectList,
  MultiSelectSearch,
  MultiSelectTrigger,
} from "@/components/ui/multi-select";

function FolderSelector({ folders, selected, onToggle, onCreate }) {
  const [open, setOpen] = useState(false);
  const first = folders.find((f) => f.id === selected[0]);

  return (
    <MultiSelect open={open} onOpenChange={setOpen}>
      <MultiSelectTrigger asChild>
        <button className="inline-flex h-7 items-center gap-1.5 rounded-full border border-stone-200 bg-white px-3 label3Medium text-stone-700 hover:bg-stone-50">
          <Folder size={12} strokeWidth={1.75} className="text-stone-400" />
          {selected.length === 0 ? (
            <span className="text-stone-400">폴더 추가</span>
          ) : (
            <>
              <span>{first?.label}</span>
              {selected.length > 1 && (
                <span className="text-stone-400">+{selected.length - 1}</span>
              )}
            </>
          )}
          <ChevronDown size={12} strokeWidth={2} className="text-stone-400" />
        </button>
      </MultiSelectTrigger>

      <MultiSelectContent>
        <MultiSelectSearch placeholder="Search" />
        <MultiSelectList>
          <MultiSelectEmpty>결과가 없습니다.</MultiSelectEmpty>
          {folders.map((folder) => (
            <MultiSelectItem
              key={folder.id}
              value={folder.label}
              selected={selected.includes(folder.id)}
              icon={<Folder size={12} strokeWidth={1.75} />}
              onSelect={() => onToggle(folder.id)}
            >
              {folder.label}
            </MultiSelectItem>
          ))}
        </MultiSelectList>
        <MultiSelectFooter>
          <button
            className="flex h-7 w-full items-center gap-1.5 rounded-md px-2 typography-label3Medium text-tds-brown-600 transition-colors hover:bg-tds-stone-50"
            onClick={onCreate}
          >
            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-tds-stone-100 text-tds-stone-500">
              <Plus size={12} strokeWidth={2.25} />
            </div>
            New folder
          </button>
        </MultiSelectFooter>
      </MultiSelectContent>
    </MultiSelect>
  );
}