import { AnimatedNumber, Stack, StackProps, Typography } from '@tidbcloud/uikit'

export const SpendLimitInfo = ({ value = 0, ...props }: { value?: number } & StackProps) => {
  return (
    <Stack gap={4} {...props}>
      <AnimatedNumber
        value={value}
        format={{ maximumFractionDigits: 5, minimumFractionDigits: 2 }}
        prefix="$"
        suffix="maximum/month"
        c="carbon.9"
        fw={700}
        fz={20}
        sx={{
          '&::part(suffix)': {
            color: 'var(--mantine-color-carbon-8)',
            fontWeight: 400,
            fontSize: 14,
            marginLeft: 8
          }
        }}
      />

      <Typography variant="body-lg">
        {value ? 'No upfront charges. Pay only for your actual usage.' : 'No credit card required.'}
      </Typography>
    </Stack>
  )
}