import React from 'react';
import RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';
import './RadioGroup.scss';

export interface RadioOption {
  /**
   * The label to display next to the radio button.
   */
  label: string;
  /**
   * The value associated with this radio button.
   */
  value: string;
  /**
   * Optional Boolean value to disable the radio button.
   */
  disabled?: boolean;
  /**
   * Optional variant for the radio button.
   */
  variant?: RadioButtonProps['variant'];
}

export interface RadioGroupProps {
  /**
   * The name associated with all radio buttons in the group.
   */
  name: string;
  /**
   * The array of options to render as radio buttons.
   */
  options: RadioOption[];
  /**
   * The currently selected value.
   */
  selectedValue?: string;
  /**
   * Handler to call when the selected value changes.
   */
  onChange?: (value: string) => void;
  /**
   * Optional variant for all radio buttons in the group.
   */
  variant?: RadioButtonProps['variant'];
  /**
   * Optional className to pass to each radio button for styling.
   */
  className: string;
}

const RadioGroup: React.FC<RadioGroupProps> = ({
  name,
  options,
  selectedValue,
  onChange,
  variant,
  className,
}) => {
  return (
    <div className="ff-radio-group">
      {options.map((option, index) => (
        <RadioButton
          key={index}
          name={name}
          label={option.label}
          value={option.value}
          checked={selectedValue === option.value}
          onChange={(e) => onChange?.(e.target.value)}
          disabled={option.disabled}
          variant={variant}
          className={className}
        />
      ))}
    </div>
  );
};

export default RadioGroup;