import { classNames } from '../lib/class-names'

export interface SegmentedControlOption<Value extends string> {
  readonly value: Value
  readonly label: string
  readonly disabled?: boolean
}

export interface SegmentedControlProps<Value extends string> {
  readonly legend: string
  readonly name: string
  readonly value: Value
  readonly options: readonly SegmentedControlOption<Value>[]
  readonly onValueChange?: (value: Value) => void
  readonly className?: string
  readonly disabled?: boolean
}

export function SegmentedControl<Value extends string>({
  legend,
  name,
  value,
  options,
  onValueChange,
  className,
  disabled = false,
}: SegmentedControlProps<Value>) {
  return (
    <fieldset
      className={classNames('drb-segmented-control', className)}
      disabled={disabled}
    >
      <legend className="drb-visually-hidden">{legend}</legend>
      {options.map((option) => (
        <label className="drb-segmented-control__option" key={option.value}>
          <input
            className="drb-segmented-control__input"
            type="radio"
            name={name}
            value={option.value}
            checked={option.value === value}
            disabled={option.disabled}
            onChange={() => onValueChange?.(option.value)}
          />
          <span className="drb-segmented-control__label">{option.label}</span>
        </label>
      ))}
    </fieldset>
  )
}