import { Box } from '@tidbcloud/uikit'
import clsx from 'clsx'
import React, { Fragment } from 'react'

interface BillingItem {
  name: string
  value: string
  bold?: boolean
}

export const BillingDetail: React.FC<
  React.PropsWithChildren<{
    details: BillingItem[]
    className?: string
  }>
> = ({ details, className }) => {
  return (
    <div className={className}>
      <div className="wd-grid wd-grid-cols-2">
        <Box component="b" sx={(theme) => ({ backgroundColor: theme.colors.carbon[2], padding: 16 })}>
          Calculator
        </Box>
        <Box
          component="b"
          sx={(theme) => ({ backgroundColor: theme.colors.carbon[2], padding: 16, textAlign: 'right' })}
        >
          Cost
        </Box>

        {details.map((i) => {
          return (
            <Fragment key={i.name}>
              <div className={clsx('wd-px-4 wd-py-2', i.bold && 'wd-font-bold')}>{i.name}</div>
              <div className={clsx('wd-px-4 wd-py-2 wd-text-right', i.bold && 'wd-font-bold')}>{i.value}</div>
            </Fragment>
          )
        })}
      </div>
    </div>
  )
}