import React from 'react'
import FormGroup from '@mui/material/FormGroup'
import FormControlLabel from '@mui/material/FormControlLabel'
import Radio from '@mui/material/Radio';
import { FieldInputProps } from 'formik'
import { useTheme } from '@mui/styles'

export interface IRadioField {
  label: string | number | JSX.Element;
  field?: FieldInputProps<any>;
}

interface IOtherProps {
  [key: string]: any;
}

export const RadioField = ({
  label,
  field,
  theme,
  disableDropdown,
  ...rest
}: IRadioField & IOtherProps) => {
  const customTheme: any = useTheme()
  return (
    <FormGroup>
      <FormControlLabel
        control={<Radio {...field} {...rest} />}
        label={label}
        componentsProps={{
          typography: customTheme?.checkbox
        }}
      />
    </FormGroup>
  )
}