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 NoRateAvailableCardProps {
  variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
  rateTitle: string
  paymentTerm: string
  bannerText?: string
  noPricesAvailableText: string
  handleTermsClick?: () => void
}

export default function NoRateAvailableCard({
  variant,
  rateTitle,
  paymentTerm,
  bannerText,
  noPricesAvailableText,
  handleTermsClick,
}: 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}`}>
              <Button
                variant="Icon"
                color="IconDefault"
                size="Small"
                onPress={handleTermsClick}
              >
                <InfoCircleIcon height={20} width={20} />
              </Button>
              {`${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>
  )
}