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

const APP_PAGES = [
  "Home",
  "Calendar",
  "Reservations",
  "Guests",
  "Listings",
  "Invoices",
  "Earnings",
];

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

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

      <CommandModal onOpenChange={setOpen} open={open}>
        <CommandInput placeholder="Search for a page..." />

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

          <CommandGroup heading="App">
            {APP_PAGES.map((page) => (
              <CommandItem key={page} onSelect={() => setOpen(false)}>
                {page}
              </CommandItem>
            ))}
          </CommandGroup>
        </CommandList>
      </CommandModal>
    </>
  );
}