"use client"

import * as React from "react"
import { CalendarIcon, SettingsIcon, UserIcon, FileTextIcon } from "lucide-react"
import { Button } from "@/registry/ui/button"
import {
  CommandPalette,
  COMMAND_PALETTE_OPEN_EVENT,
} from "@/registry/blocks/command-palette/command-palette"

export default function CommandPaletteDemo() {
  const groups = [
    {
      heading: "Navigation",
      items: [
        {
          id: "calendar",
          label: "Calendar",
          icon: <CalendarIcon />,
          onSelect: () => console.log("Calendar"),
        },
        {
          id: "documents",
          label: "Documents",
          icon: <FileTextIcon />,
          onSelect: () => console.log("Documents"),
        },
      ],
    },
    {
      heading: "Account",
      items: [
        {
          id: "profile",
          label: "Profile",
          icon: <UserIcon />,
          onSelect: () => console.log("Profile"),
        },
        {
          id: "settings",
          label: "Settings",
          icon: <SettingsIcon />,
          onSelect: () => console.log("Settings"),
        },
      ],
    },
  ]

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Button
        variant="outline"
        onClick={() =>
          document.dispatchEvent(new Event(COMMAND_PALETTE_OPEN_EVENT))
        }
      >
        Press ⌘K
      </Button>
      <CommandPalette groups={groups} />
    </div>
  )
}
command-palette

Command Palette
