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

interface SpendingLimitCostProps {
  spendingLimit: number
}

export function SpendingLimitCost({ spendingLimit }: SpendingLimitCostProps) {
  return (
    <Stack gap={4} py="xl">
      <AnimatedNumber
        value={spendingLimit || 0}
        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">
        {spendingLimit ? 'No upfront charges. Pay only for your actual usage.' : 'No credit card required.'}
      </Typography>
      {/* <Typography variant="body-lg" c="carbon.7">
        Learn more about{' '}
        <a target="_blank" rel="noreferrer" href="https://www.pingcap.com/tidb-cloud-starter-pricing-details/">
          TiDB Cloud Starter pricing
        </a>
        .
      </Typography> */}
    </Stack>
  )
}