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

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

export const FormSection = ({ children, label, description }: PropsWithChildren<FormItemProps>) => {
  return (
    <Box p="xl">
      <Stack gap={4} mb="md">
        <Typography variant="title-lg" fz={20}>
          {label}
        </Typography>
        <Typography variant="body-lg">{description}</Typography>
      </Stack>

      {children}
    </Box>
  )
}