import { Typography } from '@tidbcloud/uikit'
import { FormNumberInput } from '@tidbcloud/uikit/biz'

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

export const Capacity = ({ disabled }: { disabled?: boolean }) => {
  return (
    <FormItem
      label="Capacity"
      description={
        <Typography variant="body-md" c="carbon.7">
          Capacity scales automatically based on your workload, and you only pay for what you use. Each organization
          receives 5 GiB of storage and 50 million request units for up to 5 Starter plan instances. Additional
          resources are priced at $0.2 per GiB and $0.1 per million RUs. Learn more about{' '}
          <a
            href="https://docs.pingcap.com/tidbcloud/tidb-cloud-billing/#pricing-for-tidb-cloud-essential"
            target="_blank"
            rel="noreferrer"
          >
            capacity
          </a>
          .
        </Typography>
      }
    >
      <FormNumberInput
        min={0}
        disabled={disabled}
        name="spendingLimit"
        fixedDecimalScale
        decimalScale={2}
        label="Monthly Spending Limit"
        leftSection="$"
      />
      <Typography variant="body-md" c="carbon.7" mt={8}>
        Set a spending limit for the month. If the limit is set to $0, you can use only the free quota. Once the free
        quota is exhausted and the spending limit is reached, the instance will be automatically throttled. You can
        update the spending limit at any time.
      </Typography>
    </FormItem>
  )
}