import React, { useState } from 'react';
import './radio.css';

type OptionsProps = {
  label: string,
  value: string | number
}
type Props = {
  checked: string,
  disable?: boolean,
  variant?: 'default' |'primary' | 'secondary' | 'dark',
  size?: 'default' | 'small' | 'medium' | 'large',
  handleChange: (e:any) => void;
}

const genderOptions:OptionsProps[] = [
  {
    label: 'Male',
    value: 'male'
  },
  {
    label: 'Female',
    value: 'female'
  },
  {
    label: 'Others',
    value: 'others'
  }
]

const Radio = (props: Props) => {
  const {checked, disable,variant,size, handleChange} = props;
  return (
    <>
      {
        genderOptions && genderOptions.map((item)=>(
          <label key={item.label} className={`control--radio ${variant} ${size}`}>
            <input disabled={disable} onChange={handleChange} type='radio' id={item.label} name={item.label} value={item.value.toString()} checked={checked === item.value} readOnly/>
            <span>{item.label}</span>
          </label>
        ))
      }
    </>
  )
}

export default Radio;