import type { RadioChangeEvent, RadioGroupProps, SpaceProps } from 'antd';
import { Radio as AntRadio, Space } from 'antd';
import type { CheckboxOptionType } from 'antd/lib/checkbox';
import type { Key } from 'react';

type RadioProps = Omit<RadioGroupProps, 'onChange' | 'options'> & {
  onChange?: (value: unknown) => void;
  options?: CheckboxOptionType[];
  spaceProps?: SpaceProps;
};

export function Radio({ value = null, options, spaceProps, onChange, ...props }: RadioProps) {
  function handleChange(event: RadioChangeEvent) {
    if (onChange) onChange(event.target.value);
  }

  const buttons = options?.map((option) => (
    <AntRadio key={option.value as Key} value={option.value}>
      {option.label}
    </AntRadio>
  ));

  return (
    <AntRadio.Group onChange={handleChange} value={value} {...props}>
      {spaceProps ? <Space {...spaceProps}>{buttons}</Space> : buttons}
    </AntRadio.Group>
  );
}