import { clsx } from 'clsx';

export interface RadioButtonProps<T extends string | number = string> {
  id?: string;
  name: string;
  checked?: boolean;
  onChange?: (value: T) => void;
  disabled?: boolean;
  value?: T;
  readOnly?: boolean;
  className?: string;
  'aria-describedby'?: string;
}

export default function RadioButton<T extends string | number = ''>({
  id,
  value = '' as T,
  name,
  checked,
  onChange,
  disabled,
  readOnly,
  className,
  'aria-describedby': ariaDescribedBy,
}: RadioButtonProps<T>) {
  return (
    <>
      <input
        type="radio"
        className={clsx('sr-only', className)}
        id={id}
        value={value}
        name={name}
        checked={checked}
        disabled={disabled || readOnly}
        aria-describedby={ariaDescribedBy}
        onChange={() => {
          if (!checked) {
            onChange?.(value);
          }
        }}
      />
      <span className={clsx('tw-radio-button', { checked, disabled: disabled || readOnly })}>
        <span className="tw-radio-check" />
      </span>
    </>
  );
}