import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Bookmark, ChevronUpDown } from "@mynaui/icons-react";

export default function Simple() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          className="w-full justify-between md:w-72"
        >
          <div className="flex items-center gap-2 truncate">
            <Bookmark className="size-4" stroke={2} />
            <span className="truncate">Select a bookmark</span>
          </div>
          <ChevronUpDown
            className="size-4 shrink-0 text-muted-foreground"
            stroke={2}
          />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0 md:w-72">
        <Command>
          <CommandInput placeholder="Search bookmarks..." />
          <CommandEmpty>No bookmarks found.</CommandEmpty>
          <CommandList>
            <CommandGroup className="max-h-[300px] overflow-auto">
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Personal Blog</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Work Project Dashboard</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Favorite Recipes</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Travel Inspiration</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Coding Resources</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Design Inspiration</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Financial Trackers</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Fitness Routines</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Productivity Tools</span>
              </CommandItem>
              <CommandItem>
                <Bookmark className="mr-2 size-4" stroke={2} />
                <span className="truncate">Educational Resources</span>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}
Combobox
