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

const DEFAULT_HTML: string | null = "<button data-c42-nav-collapse aria-label=\"Collapse\"></button>\n  <ul>\n    <li><a data-c42-nav-item href=\"/\" data-value=\"home\">Home</a></li>\n    <li data-c42-nav-group>\n      <button data-c42-nav-trigger data-value=\"settings\">Settings</button>\n      <ul data-c42-nav-submenu>\n        <li><a data-c42-nav-item href=\"/p\" data-value=\"profile\">Profile</a></li>\n      </ul>\n    </li>\n  </ul>";

export interface NavProps extends Partial<NavOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"nav"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `nav:toggle` — detail: `{ value, open }` */
  onToggle?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `nav:select` — detail: `{ value }` */
  onSelect?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `nav:collapse` — detail: `{ collapsed }` */
  onCollapse?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<nav>` element. */
  [key: string]: unknown;
}

export function Nav(props: NavProps) {
  const { as, className, children, onToggle, onSelect, onCollapse, defaultActive, accordion, collapsed, ...rest } = props;
  const options = { defaultActive, accordion, collapsed } as NavOptions;

  return (
    <C42
      controller={NavController}
      options={options}
      deps={[defaultActive, accordion, collapsed]}
      events={{
        'nav:toggle': onToggle,
        'nav:select': onSelect,
        'nav:collapse': onCollapse,
      }}
      as={(as as ElementType) ?? 'nav'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-nav': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}