import { Group, GroupProps } from '@tidbcloud/uikit'
import React from 'react'

import { FormsBillsOverview } from 'apiClient/services/billing_tcpn/interface'

import { CostsLabel } from './CostsItem'
import { MoneyValue } from './MoneyValue'

export const OnDemandBillingOverview: React.FC<
  React.PropsWithChildren<{
    bill?: FormsBillsOverview
    spacing?: GroupProps['gap']
  }>
> = ({ bill, spacing = 64 }) => {
  const runningTotal = Number(bill?.runningTotal || '0')
  const discount = -Number(bill?.discounts || '0')
  const totalCost = Number(bill?.totalCost || '0')
  const credit = -Number(bill?.credits || '0')

  const items = [
    {
      label: 'Running Total',
      value: <MoneyValue amount={runningTotal} />
    },
    {
      label: 'Discounts',
      value: <MoneyValue amount={discount} />
    },
    {
      label: 'Credits',
      value: <MoneyValue amount={credit} />
    },
    {
      label: 'Total Cost',
      value: <MoneyValue amount={totalCost} />
    }
  ]

  return (
    <Group grow gap={spacing}>
      {items.map((item) => {
        return (
          <CostsLabel key={item.label} label={item.label} value={item.value} />
        )
      })}
    </Group>
  )
}