import { Box, BoxProps, Flex, Typography, TypographyProps } from '@tidbcloud/uikit'

interface BlockHeaderProps extends BoxProps {
  title: React.ReactNode
  description?: React.ReactNode
  rightSection?: React.ReactNode
  titleProps?: TypographyProps
  descriptionProps?: TypographyProps
}

export const BlockHeader = ({
  title,
  description,
  rightSection,
  titleProps,
  descriptionProps,
  ...rootProps
}: BlockHeaderProps) => {
  return (
    <Flex justify="space-between" align="flex-start" {...rootProps}>
      <Box>
        <Typography variant="title-lg" {...titleProps}>
          {title}
        </Typography>
        {description && (
          <Typography variant="body-lg" mt={4} {...descriptionProps}>
            {description}
          </Typography>
        )}
      </Box>
      {rightSection}
    </Flex>
  )
}