import { CommandModal } from '@wandercom/design-system-web/blocks/command';

const CMD_ITEMS = {
  "Group 1": [
    {
      title: "Item 1",
      description: "Item 1 description",
      icon: <div className="size-4 rounded-full bg-red-500" />,
    },
    {
      title: "Item 2",
      description: "Item 2 description",
      icon: <div className="size-4 rounded-full bg-blue-500" />,
    },
  ],
  "Group 2": [
    {
      title: "Item 3",
      description: "Item 3 description",
      icon: <div className="size-4 rounded-full bg-green-500" />,
    },
  ],
};

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command</Button>

      <CommandModal onOpenChange={setOpen} open={open}>
        <CommandInput placeholder="Search" />

        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>

          {Object.entries(CMD_ITEMS).map(([group, items]) => (
            <CommandGroup heading={group} key={group}>
              {items.map((option) => (
                <CommandItem
                  key={option.title}
                  onSelect={() => console.log(option.title)}
                >
                  {option.icon}
                  <span>
                    {option.title}
                  </span>
                </CommandItem>
              ))}
            </CommandGroup>
          ))}
        </CommandList>
      </CommandModal>
    </>
  );
}