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

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

export const FormItem = ({
  children,
  label,
  description,
  defaultExpanded = true
}: PropsWithChildren<FormItemProps>) => {
  const defaultCheckedValue = defaultExpanded ? '1' : '0'

  return (
    <Accordion
      defaultValue={defaultCheckedValue}
      styles={() => ({
        control: {
          padding: 24,
          '&:hover': { background: 'none' }
        },
        label: {
          paddingTop: 0,
          paddingBottom: 0
        },
        item: {
          borderBottom: 'none'
        },
        content: {
          padding: 24,
          paddingTop: 0
        }
      })}
    >
      <Accordion.Item key="1" value="1">
        <Accordion.Control data-mp-no-event>
          <Typography variant="title-lg">{label}</Typography>
          {description && (
            <Typography variant="body-lg" component="div" c="carbon.7" mt={4}>
              {description}
            </Typography>
          )}
        </Accordion.Control>
        <Accordion.Panel>{children}</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}