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

const DEFAULT_HTML: string | null = "<img data-c42-avatar-image src=\"…\" alt=\"Jane Doe\" />\n  <span data-c42-avatar-fallback></span>\n  <span data-c42-avatar-status></span>";

export interface AvatarProps extends Partial<AvatarOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"div"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `avatar:load` — detail: `(no detail)` */
  onLoad?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `avatar:error` — detail: `(no detail)` */
  onError?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `avatar:statuschange` — detail: `{ status }` */
  onStatuschange?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<div>` element. */
  [key: string]: unknown;
}

export function Avatar(props: AvatarProps) {
  const { as, className, children, onLoad, onError, onStatuschange, name, status, ...rest } = props;
  const options = { name, status } as AvatarOptions;

  return (
    <C42
      controller={AvatarController}
      options={options}
      deps={[name, status]}
      events={{
        'avatar:load': onLoad,
        'avatar:error': onError,
        'avatar:statuschange': onStatuschange,
      }}
      as={(as as ElementType) ?? 'div'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-avatar': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}