import { cx } from "class-variance-authority"

import { Typography } from "@scandic-hotels/design-system/Typography"

import styles from "./row.module.css"

interface RowProps {
  label?: string
  value: string
  regularValue?: string
  isDiscounted?: boolean
}

export default function BoldRow({
  label,
  value,
  regularValue,
  isDiscounted = false,
}: RowProps) {
  return (
    <tr className={styles.row}>
      {label ? (
        <td>
          <Typography variant="Body/Supporting text (caption)/smBold">
            <span>{label}</span>
          </Typography>
        </td>
      ) : null}
      <td className={styles.price}>
        {isDiscounted && regularValue ? (
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>
              <s className={styles.strikeThroughRate}>{regularValue}</s>
            </p>
          </Typography>
        ) : null}
        <Typography variant="Body/Supporting text (caption)/smBold">
          <span className={cx({ [styles.discounted]: isDiscounted })}>
            {value}
          </span>
        </Typography>
      </td>
    </tr>
  )
}