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

const DEFAULT_HTML: string | null = "<img data-c42-gallery-thumb src=\"thumb1.jpg\" data-full=\"full1.jpg\" />\n  <img data-c42-gallery-thumb src=\"thumb2.jpg\" data-full=\"full2.jpg\" />\n  <div data-c42-gallery-lightbox>\n    <img data-c42-gallery-image />\n    <button data-c42-gallery-prev>‹</button>\n    <button data-c42-gallery-next>›</button>\n    <button data-c42-gallery-close>×</button>\n  </div>";

export interface GalleryProps extends Partial<GalleryOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"div"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `gallery:open` — detail: `(no detail)` */
  onOpen?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `gallery:close` — detail: `(no detail)` */
  onClose?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `gallery:change` — detail: `{ index, src }` */
  onChange?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<div>` element. */
  [key: string]: unknown;
}

export function Gallery(props: GalleryProps) {
  const { as, className, children, onOpen, onClose, onChange, loop, closeOnEscape, lockScroll, ...rest } = props;
  const options = { loop, closeOnEscape, lockScroll } as GalleryOptions;

  return (
    <C42
      controller={GalleryController}
      options={options}
      deps={[loop, closeOnEscape, lockScroll]}
      events={{
        'gallery:open': onOpen,
        'gallery:close': onClose,
        'gallery:change': onChange,
      }}
      as={(as as ElementType) ?? 'div'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-gallery': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}