import { Accordion, Box, Typography } from '@tidbcloud/uikit'
import { PropsWithChildren } from 'react'

interface FormItemProps {
  label: React.ReactNode
  description?: React.ReactNode
}

export const FormItem = ({ children, label, description }: PropsWithChildren<FormItemProps>) => {
  const defaultValue = '1'

  return (
    <Accordion
      defaultValue={defaultValue}
      styles={{
        root: {
          padding: 24
        },
        item: {
          borderBottom: 'none'
        },
        control: {
          padding: 0,
          paddingBottom: 12,
          '&:hover': { background: 'none' }
        },
        label: {
          paddingTop: 0,
          paddingBottom: 0
        },
        content: {
          padding: 0
        }
      }}
    >
      <Accordion.Item value={defaultValue}>
        <Box sx={{ paddingBottom: 12 }}>
          <Typography variant="title-lg">{label}</Typography>
          {description && (
            <Typography variant="body-lg" c="carbon.7" mt={4}>
              {description}
            </Typography>
          )}
        </Box>
        <Accordion.Panel>{children}</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}