import { FormControl, FormControlProps } from '@chakra-ui/form-control'
import { Stack, StackDirection, Text } from '@chakra-ui/layout'
import { Radio, RadioGroup } from '@chakra-ui/radio'
import * as React from 'react'

interface ICustomRadioProps {
  data?: any
  direction?: StackDirection | undefined
  register?: any
  name: string
  errors?: any
  label?: string
}

const CustomRadio: React.FunctionComponent<ICustomRadioProps & FormControlProps> = (props) => {
  const { label, errors, name, data = [], direction = 'row', register, ...rest } = props
  const error = errors[name]
  return (
    <FormControl {...rest}>
      {label && data.length > 0 && (
        <Text mb="16px" color={'#FFBD13'}>
          {label}
        </Text>
      )}
      <RadioGroup>
        <Stack direction={direction}>
          {data.map((item, key) => (
            <Radio {...register(name)} key={key} value={item.value}>
              {item.name}
            </Radio>
          ))}
        </Stack>
      </RadioGroup>
      {error && data.length > 0 && (
        <Text fontSize="14px" lineHeight="21px" color="#FF4B32">
          {error?.message}
        </Text>
      )}
    </FormControl>
  )
}

export default CustomRadio