import { Accordion, AccordionProps } from '@tidbcloud/uikit'
import { IconChevronRightFill } from '@tidbcloud/uikit/icons'

export const AccordionWrap = (props: AccordionProps) => {
  return (
    <Accordion
      chevronPosition="right"
      chevron={<IconChevronRightFill />}
      styles={(theme) => ({
        control: {
          // padding: '4px 16px',
          backgroundColor: theme.colors.carbon[2],
          fontSize: 12,
          '&:hover': {
            backgroundColor: theme.colors.carbon[2]
          }
        },
        label: {
          paddingTop: 4,
          paddingBottom: 4
        },
        content: {
          padding: 0
        },
        chevron: {
          '&[data-rotate]': {
            transform: 'rotate(90deg)'
          }
        }
      })}
      {...props}
    >
      {props.children}
    </Accordion>
  )
}