import React from 'react';
import {
  ImageProps,
  StackProps,
  Image,
  useRadio,
  chakra,
  Box,
  UseRadioProps,
  Flex,
} from '@chakra-ui/react';

import { getPropsByState } from './helper';

type CarBodyOptionProps = {
  image: ImageProps['src'];
  label: StackProps['children'];
} & UseRadioProps;

export const CarBodyOption = ({
  image,
  label,
  ...radioProps
}: CarBodyOptionProps) => {
  const { state, getInputProps, getRadioProps, htmlProps, getLabelProps } =
    useRadio(radioProps);

  return (
    <chakra.label {...htmlProps} cursor='pointer'>
      <input {...getInputProps({})} hidden />
      <Box {...getRadioProps()} p={2} {...getPropsByState(state)}>
        <Flex direction='column' alignItems='center' {...getLabelProps()}>
          <Image src={image} rounded={4} />
          {label}
        </Flex>
      </Box>
    </chakra.label>
  );
};
