import React from 'react';
import './RadioButton.scss';

export interface RadioButtonProps {
  /**
   * Optional Specifies the unique identifier for the radio button.
   */
  id?: string;
  /**
   * Optional Text that appears next to the radio button,
   */
  label?: string;
  /**
   * Optional The name associated with the radio button input.
   */
  name?: string;
  /**
   * Optional radio button value
   */
  value?: string;
  /**
   * Optional Boolean value to disable radio button
   */
  disabled?: boolean;
  /**
   * Optional on change handler
   */
  className?: string;
    /**
   * Optional className for custom styling.
   */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /**
   * Optional Variant of radio button
   */
  variant?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
  /**
   * Optional checked attribute to prefill
   */
  checked?: boolean;
}

const RadioButton: React.FC<RadioButtonProps> = ({
  id,
  label,
  name,
  value,
  onChange,
  disabled,
  variant = 'primary',
  checked,
  className,
}) => {
  return (
    <label className={`ff-radio-button  ${className || ''}`}>
      <input
        id={id}
        className="ff-radio-input"
        type="radio"
        name={name}
        value={value}
        checked={checked}
        onChange={onChange}
        disabled={disabled}
      />

      <span className={`ff-radio-checkmark ff-radio-checkmark--${variant}`} />
      {label}
    </label>
  );
};

export default RadioButton;
