import { Box, Group, GroupProps, Typography, TypographyProps } from '@tidbcloud/uikit'

interface BlockHeaderProps extends GroupProps {
  heading: React.ReactNode
  desc?: React.ReactNode
  rightSection?: React.ReactNode
  headingProps?: TypographyProps
  descProps?: TypographyProps
}

export const BlockHeader = ({ heading, desc, rightSection, headingProps, descProps, ...props }: BlockHeaderProps) => {
  return (
    <Group justify="space-between" align="flex-start" {...props}>
      <Box flex={1}>
        <Typography variant="title-lg" component="div" mb={4} {...headingProps}>
          {heading}
        </Typography>
        <Typography variant="body-lg" component="div" c="carbon.7" {...descProps}>
          {desc}
        </Typography>
      </Box>
      {rightSection}
    </Group>
  )
}