import { ReactNode } from 'react';

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

export type { ICheckboxOption };

/**
 * Interface representing a group of checkboxes
 */
export interface ICheckboxGroup {
  /** Array of checkbox options to display */
  checkboxList: ICheckboxOption[];
  /** Whether multiple checkboxes can be selected */
  isMulti?: boolean;
  /** Callback function triggered when a checkbox is clicked */
  onClick?: (selectedOption: ICheckboxOption, selectedOptionList: ICheckboxOption[]) => void;
  /** Optional heading to display above the checkbox group */
  heading?: ReactNode | string;
  /** Optional style configuration for different parts of the checkbox group */
  styleConfig?: {
    /** Styles for the root container element */
    root?: Styles[];
    /** Styles for the heading element */
    heading?: TextStyle[];
    /** Styles for the container of each checkbox */
    checkboxContainer?: Styles[];
  };
}