import {
  AccordionPanel,
  AccordionPanelProps,
  ComponentWithAs,
  forwardRef,
  useBreakpointValue,
  useColorMode,
} from '@chakra-ui/react';

import { theme } from '../../modules/theme';
import { TYPOGRAPHY_STYLES } from '../Typography';

export const NumberedAccordionPanel: ComponentWithAs<'div', AccordionPanelProps> = forwardRef<
  AccordionPanelProps,
  'div'
>((props, ref) => {
  const { colorMode } = useColorMode();

  const typography: keyof typeof TYPOGRAPHY_STYLES['body'] =
    useBreakpointValue({
      base: 'sm',
      md: 'md',
    }) || 'md';

  return (
    <AccordionPanel
      ref={ref}
      mx={{ base: theme.sizes['5'], md: theme.sizes['6'] }}
      pl={{ base: theme.sizes['10'], md: theme.sizes['12'] }}
      pr={{ base: 0, md: '44px' }}
      pt={0}
      pb={theme.sizes['5']}
      color={theme.colors[colorMode].text.secondary}
      {...TYPOGRAPHY_STYLES['body'][typography]}
      {...props}
    />
  );
});