import { Box, HStack, useRadio, useRadioGroup } from '@chakra-ui/react';

function ChartsTabs({selectedValue, setSelectedValue}) {
  // This function represents the RadioCard part
  function RadioCard(props) {
    const { getInputProps, getRadioProps } = useRadio(props);
    const input = getInputProps();
    const checkbox = getRadioProps();

    return (
      <Box as='label'>
        <input {...input} />
        <Box 
          {...checkbox}
          cursor='pointer'
          borderWidth='1px'
          borderRadius='md'
          boxShadow='md'
          fontSize={"sm"}
          _checked={{
            bg: '#4023A6',
            color: 'white',
            borderColor: '#4023A6',
          }}
          _focus={{
            boxShadow: 'outline',
          }}
          px={4}
          py={1}
        >
          {props.children}
        </Box>
      </Box>
    );
  }

  // Setting defaultValue to 'Daily'
  const options = ['Daily', 'Monthly', 'Yearly'];

  const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'framework',
    defaultValue: 'Daily', // Default tab is set to 'Daily'
    onChange: (value) => setSelectedValue(value),
  });

  const group = getRootProps();

  return (
    <HStack {...group}>
      {options.map((value) => {
        const radio = getRadioProps({ value });
        return (
          <RadioCard key={value} {...radio}>
            {value}
          </RadioCard>
        );
      })}
    </HStack>
  );
}

export default ChartsTabs;
