import { ReactNode } from 'react';

import type { Styles, TextStyle } from '@cleartrip/ct-design-types';

/** Interface representing a single radio option */
export interface IRadioOption {
  /** Unique identifier for the radio option */
  id: string;
  /** Label content for the radio option, can be a string or React node */
  label: ReactNode | string;
  /** Whether the radio option is disabled */
  disabled?: boolean;
  /** Whether the radio option is checked */
  checked?: boolean;
}

/** Interface representing a group of radio options */
export interface IRadioGroup {
  /** Array of radio options to be displayed in the group */
  radioList: IRadioOption[];
  /** Callback function triggered when a radio option is selected */
  onClick?: (selectedOption: IRadioOption) => void;
  /** Optional heading for the radio group, can be a string or React node */
  heading?: ReactNode | string;
  /** Custom styles for different parts of the radio group */
  styleConfig?: {
    /** Styles for the root container */
    root?: Styles[];
    /** Styles for the heading text */
    heading?: TextStyle[];
    /** Styles for the container of each radio option */
    radioContainer?: Styles[];
  };
}