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

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

export const FormItem = ({ children, label, description }: PropsWithChildren<FormItemProps>) => {
  return (
    <Box p="xl">
      <Stack gap={4} mb="md">
        <Typography component="div" variant="title-lg">
          {label}
        </Typography>
        {description && (
          <Typography component="div" variant="body-lg" c="carbon.7">
            {description}
          </Typography>
        )}
      </Stack>
      {children}
    </Box>
  )
}