import { Card, CardProps, Flex, Typography } from '@tidbcloud/uikit'

interface BillsCardProps extends CardProps {
  title?: string
  rightSection?: React.ReactNode
}

export const BillsCard: React.FC<React.PropsWithChildren<BillsCardProps>> = ({
  children,
  rightSection,
  title,
  ...rest
}) => {
  return (
    <Card p={24} {...rest}>
      <Flex align="center" justify="space-between">
        <Typography variant="title-lg" c="carbon.8">
          {title}
        </Typography>
        {rightSection}
      </Flex>
      {children}
    </Card>
  )
}