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

const DEFAULT_HTML: string | null = "<!-- the editor card: toolbar + input + footer (styled via .c42-whatsapp-editor-surface) -->\n  <div class=\"c42-whatsapp-editor-surface\">\n    <div data-c42-wa-toolbar>\n      <button data-c42-wa-command=\"bold\" aria-label=\"Bold\"><b>B</b></button>\n      <button data-c42-wa-command=\"italic\" aria-label=\"Italic\"><i>I</i></button>\n      <button data-c42-wa-command=\"strikethrough\" aria-label=\"Strikethrough\">S</button>\n      <button data-c42-wa-command=\"monospace\" aria-label=\"Monospace\">&lt;/&gt;</button>\n      <button data-c42-wa-command=\"blockquote\" aria-label=\"Quote\">&gt;</button>\n      <button data-c42-wa-command=\"bullet\" aria-label=\"Bulleted list\">•</button>\n      <button data-c42-wa-command=\"ordered\" aria-label=\"Numbered list\">1.</button>\n      <button data-c42-wa-command=\"clear\" aria-label=\"Clear formatting\">⌫</button>\n    </div>\n    <textarea data-c42-wa-input placeholder=\"Write a message…\"></textarea>\n    <!-- footer: counter left, emoji affordance bottom-right (picker drops below) -->\n    <div class=\"c42-whatsapp-editor-footer\">\n      <span data-c42-wa-counter></span>\n      <span class=\"c42-whatsapp-editor-emoji\">\n        <button data-c42-wa-trigger aria-label=\"Emoji\">🙂</button>\n        <div data-c42-wa-picker hidden></div>\n      </span>\n    </div>\n  </div>\n  <!-- optional bubble toolbar shown above the selection -->\n  <div data-c42-wa-floating class=\"c42-whatsapp-editor-floating\" hidden>\n    <button data-c42-wa-command=\"bold\" aria-label=\"Bold\"><b>B</b></button>\n    <button data-c42-wa-command=\"italic\" aria-label=\"Italic\"><i>I</i></button>\n    <button data-c42-wa-command=\"strikethrough\" aria-label=\"Strikethrough\">S</button>\n    <span class=\"c42-whatsapp-editor-separator\" aria-hidden=\"true\"></span>\n    <button data-c42-wa-command=\"monospace\" aria-label=\"Monospace\">&lt;/&gt;</button>\n  </div>\n  <!-- preview lives OUTSIDE the surface, as a separate block below the editor -->\n  <div data-c42-wa-preview aria-live=\"polite\"></div>";

export interface WhatsappEditorProps extends Partial<WhatsappEditorOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"div"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `whatsappeditor:change` — detail: `{ text, html, length }` */
  onChange?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `whatsappeditor:format` — detail: `{ marker, text }` */
  onFormat?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<div>` element. */
  [key: string]: unknown;
}

export function WhatsappEditor(props: WhatsappEditorProps) {
  const { as, className, children, onChange, onFormat, value, maxLength, emojis, floating, renderPicker, ...rest } = props;
  const options = { value, maxLength, emojis, floating, renderPicker } as WhatsappEditorOptions;

  return (
    <C42
      controller={WhatsappEditorController}
      options={options}
      deps={[value, maxLength, emojis, floating, renderPicker]}
      events={{
        'whatsappeditor:change': onChange,
        'whatsappeditor:format': onFormat,
      }}
      as={(as as ElementType) ?? 'div'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-whatsapp-editor': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}