// AUTO-GENERATED by scripts/generate-wrappers.mjs — do not edit by hand.
// Source: packages/core/manifest.json (component "command-palette").
import type { ElementType, ReactNode } from 'react';
import { CommandPalette as CommandPaletteController, type CommandPaletteOptions } from '@42/core/command-palette';
import { C42 } from '../C42';

const DEFAULT_HTML: string | null = "<div data-c42-command-overlay></div>\n  <div data-c42-command-dialog>\n    <input data-c42-command-input placeholder=\"Type a command…\" />\n    <div data-c42-command-list>\n      <div data-c42-command-group data-label=\"Files\">\n        <button data-c42-command-item data-value=\"new\" data-keywords=\"create\">New File</button>\n        <button data-c42-command-item data-value=\"open\">Open File…</button>\n      </div>\n      <div data-c42-command-empty>No results</div>\n    </div>\n  </div>";

export interface CommandPaletteProps extends Partial<CommandPaletteOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"div"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `commandpalette:open` — detail: `(no detail)` */
  onOpen?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `commandpalette:close` — detail: `(no detail)` */
  onClose?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `commandpalette:select` — detail: `{ value, item }` */
  onSelect?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `commandpalette:filter` — detail: `{ query, count }` */
  onFilter?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<div>` element. */
  [key: string]: unknown;
}

export function CommandPalette(props: CommandPaletteProps) {
  const { as, className, children, onOpen, onClose, onSelect, onFilter, defaultOpen, hotkey, closeOnOverlayClick, closeOnEscape, clearOnClose, filter, ...rest } = props;
  const options = { defaultOpen, hotkey, closeOnOverlayClick, closeOnEscape, clearOnClose, filter } as CommandPaletteOptions;

  return (
    <C42
      controller={CommandPaletteController}
      options={options}
      deps={[defaultOpen, hotkey, closeOnOverlayClick, closeOnEscape, clearOnClose, filter]}
      events={{
        'commandpalette:open': onOpen,
        'commandpalette:close': onClose,
        'commandpalette:select': onSelect,
        'commandpalette:filter': onFilter,
      }}
      as={(as as ElementType) ?? 'div'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-command-palette': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}