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

import { SumInfoItem } from '../../components'

interface SpendLimitSumPropertyProps {
  value?: number
  isError?: boolean
  labelProps?: TypographyProps
}

export const SpendLimitSumProperty = ({ value, isError, labelProps }: SpendLimitSumPropertyProps) => {
  return <SumInfoItem label="Spending Limit" value={`$${value} / month`} isError={isError} labelProps={labelProps} />
}

export const SpendLimitCost = ({ value = 0 }: { value?: number }) => {
  return (
    <Stack gap={4} py="xl">
      <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>
  )
}