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

import { useIntl } from "react-intl"
import { IconButton } from "../../IconButton"
import Modal from "../Modal"

import styles from "./termModal.module.css"
import { Typography } from "../../Typography"
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { RateTermDetails } from "../types"
import { Button } from "../../Button"

interface TermModalProps {
  rateTitle: string
  paymentTerm: string
  rateTermDetails: RateTermDetails[]
  variant?: "icon" | "text"
}

export default function TermModal({
  rateTitle,
  paymentTerm,
  rateTermDetails,
  variant = "icon",
}: TermModalProps) {
  const intl = useIntl()
  return (
    <Modal
      title={rateTitle}
      subtitle={paymentTerm}
      trigger={
        variant === "text" ? (
          <Button variant="Text" size="sm" className={styles.triggerText}>
            {intl.formatMessage({
              id: "selectRate.alert.reservationPolicies",
              defaultMessage: "See reservation policies",
            })}
          </Button>
        ) : (
          <IconButton
            variant="Muted"
            emphasis
            size="sm"
            aria-label={intl.formatMessage({
              id: "selectRate.rateCard.openReservationPolicy",
              defaultMessage: "Open reservation policy",
            })}
            className={styles.triggerButton}
            iconName="info"
          />
        )
      }
    >
      {rateTermDetails.map((termGroup) => (
        <div key={termGroup.title} className={styles.terms}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>{termGroup.title}</p>
          </Typography>
          {termGroup.terms.map((term) => (
            <Typography key={term}>
              <p className={styles.term}>
                <MaterialIcon
                  icon="check"
                  color="Icon/Feedback/Success"
                  size={20}
                />
                {term}
              </p>
            </Typography>
          ))}
        </div>
      ))}
    </Modal>
  )
}