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

import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import styles from '../rate-card.module.css'
import { variants } from '../variants'

interface NoRateAvailableCardProps {
  variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
  rateTitle: string
  paymentTerm: string
  bannerText?: string
  noPricesAvailableText: string
}

export default function NoRateAvailableCard({
  variant,
  rateTitle,
  paymentTerm,
  bannerText,
  noPricesAvailableText,
}: NoRateAvailableCardProps) {
  const classNames = variants({
    variant,
  })

  return (
    <div className={classNames}>
      {bannerText && (
        <Typography variant="Tag/sm">
          <p className={styles.banner}>{bannerText}</p>
        </Typography>
      )}
      <div className={styles.container}>
        <header>
          <Typography variant="Tag/sm">
            <h3 className={`${styles.title} ${styles.textDisabled}`}>
              <IconButton theme="Black" style="Muted">
                <MaterialIcon icon="info" size={20} color="Icon/Default" />
              </IconButton>
              {`${rateTitle} / ${paymentTerm}`}
            </h3>
          </Typography>
        </header>
        <div>
          <div className={styles.noPricesAvailableContainer}>
            <Typography variant="Body/Supporting text (caption)/smBold">
              <p className={styles.noPricesAvailableText}>
                {noPricesAvailableText}
              </p>
            </Typography>
          </div>
        </div>
      </div>
    </div>
  )
}