import React from 'react';
import { Radio } from 'antd';
import { FormItemHeight } from '../constants';

interface IProps {
  label?: string;
  value?: string | number;
  options?: {
    label: string | number;
    value: string | number;
  }[];
  width?: number | string;
  onChange?: (value: string | number) => void;
}

const SelectField: React.FC<IProps> = props => {
  const { label = '', value, onChange, options = [], width } = props;
  return (
    <div className="group">
      <label>{label}</label>
      <Radio.Group
        value={value}
        style={{
          width,
          height: FormItemHeight,
        }}
        onChange={e => {
          onChange?.(e.target.value);
        }}
      >
        {options.map(item => (
          <Radio key={`${item.value}-${item.label}`} value={item.value}>{item.label}</Radio>
        ))}
      </Radio.Group>
    </div>
  );
};

export default SelectField;