"use client"

import * as React from "react"
import { CommandIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { CommandPalette, type CommandPaletteGroup } from "@/components/command/command-palette"

export type AdvancedCommandMenuProps = {
  groups: CommandPaletteGroup[]
  label?: React.ReactNode
  title?: React.ReactNode
  description?: React.ReactNode
  placeholder?: string
}

function AdvancedCommandMenu({
  groups,
  label = "Command menu",
  title = "Command menu",
  description = "Search commands and actions.",
  placeholder = "Search commands...",
}: AdvancedCommandMenuProps) {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button type="button" variant="outline" onClick={() => setOpen(true)} className="gap-2">
        <CommandIcon className="size-4" />
        {label}
      </Button>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        title={title}
        description={description}
        placeholder={placeholder}
        groups={groups}
      />
    </>
  )
}

export { AdvancedCommandMenu }