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

const DEFAULT_HTML: string | null = "<ul>\n    <li data-c42-mega-menu-item>\n      <button data-c42-mega-menu-trigger data-value=\"products\">Products</button>\n      <div data-c42-mega-menu-panel>…multi-column content…</div>\n    </li>\n    <li data-c42-mega-menu-item>\n      <a data-c42-mega-menu-trigger href=\"/pricing\">Pricing</a>\n    </li>\n  </ul>";

export interface MegaMenuProps extends Partial<MegaMenuOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"nav"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `megamenu:open` — detail: `{ value }` */
  onOpen?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `megamenu:close` — detail: `{ value }` */
  onClose?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<nav>` element. */
  [key: string]: unknown;
}

export function MegaMenu(props: MegaMenuProps) {
  const { as, className, children, onOpen, onClose, openOnHover, openDelay, closeDelay, ...rest } = props;
  const options = { openOnHover, openDelay, closeDelay } as MegaMenuOptions;

  return (
    <C42
      controller={MegaMenuController}
      options={options}
      deps={[openOnHover, openDelay, closeDelay]}
      events={{
        'megamenu:open': onOpen,
        'megamenu:close': onClose,
      }}
      as={(as as ElementType) ?? 'nav'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-mega-menu': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}