/**
 * `<option-card-ui>` — Radio-style card with heading + description + icon.
 *
 * @see https://ui-kit.exe.xyz/site/components/option-card
 */

import { UIFormElement } from '../../core/form.js';

export interface OptionCardChangeEventDetail {
  value: string;
  checked: boolean;
}
export type OptionCardChangeEvent = CustomEvent<OptionCardChangeEventDetail>;

export class UIOptionCard extends UIFormElement {
  /** Selected state — reflected; setting `checked=true` deselects siblings in the group. */
  checked: boolean;
  heading: string;
  description: string;
  icon: string;
  /** Layout — `default` (vertical) / `horizontal` / `compact`. */
  layout: 'default' | 'horizontal' | 'compact';

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIOptionCard, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'change', listener: (ev: OptionCardChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
