web/packages/design-system/lib/components/RateCard/Code/index.tsx

import { Rate } from '../types'

import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import InfoCircleIcon from '../../Icons/InfoCircle'
import { variants } from '../variants'

interface CodeRateCardProps {
  name: string
  value: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
  rate: Rate
  bannerText: string
  comparisonRate?: Omit<Rate, 'label'>
  approximateRate?: Rate
  isHighlightedRate?: boolean
  handleChange: () => void
  handleTermsClick?: () => void
}

export default function CodeRateCard({
  name,
  value,
  isSelected,
  rateTitle,
  paymentTerm,
  rate,
  approximateRate,
  comparisonRate,
  bannerText,
  isHighlightedRate,
  handleChange,
  handleTermsClick,
}: CodeRateCardProps) {
  const classNames = variants({
    variant: 'Code',
  })

  return (
    <label>
      <input
        className={styles.radio}
        type="radio"
        name={name}
        value={value}
        checked={isSelected}
        onChange={handleChange}
      />
      <div className={classNames}>
        <Typography variant="Tag/sm">
          <p className={styles.banner}>{bannerText}</p>
        </Typography>
        <div className={styles.container}>
          <header>
            <Typography variant="Tag/sm">
              <h3 className={styles.title}>
                <Button
                  variant="Icon"
                  color="IconDefault"
                  size="Small"
                  onPress={handleTermsClick}
                >
                  <InfoCircleIcon height={20} width={20} />
                </Button>
                {rateTitle}
                <span className={styles.textSecondary}>
                  {` / ${paymentTerm}`}
                </span>
              </h3>
            </Typography>
          </header>
          <div className={styles.content}>
            <div
              className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
            >
              <Typography variant="Body/Supporting text (caption)/smBold">
                <p>{rate.label}</p>
              </Typography>
              <Typography variant="Title/Subtitle/md">
                <p>
                  {`${rate.price} `}
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <span>{rate.unit}</span>
                  </Typography>
                </p>
              </Typography>
            </div>
            {comparisonRate ? (
              <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
                <Typography variant="Title/Subtitle/md">
                  <p>
                    <span className={styles.strikethrough}>{rate.price}</span>{' '}
                    <Typography variant="Body/Supporting text (caption)/smBold">
                      <span className={styles.strikethrough}>
                        {comparisonRate.unit}
                      </span>
                    </Typography>
                  </p>
                </Typography>
              </div>
            ) : null}
            {approximateRate ? (
              <div className={`${styles.rateRow} ${styles.approximateRate}`}>
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <p>{approximateRate.label}</p>
                </Typography>
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <p>
                    {approximateRate.price} {approximateRate.unit}
                  </p>
                </Typography>
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </label>
  )
}