web/apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Large.tsx

import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

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

import { formatPrice } from "@/utils/numberFormatting"

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

import type { Price } from "@/types/components/hotelReservation/price"

interface RowProps {
  allPricesIsDiscounted: boolean
  label: string
  price: Price
}

export default function LargeRow({
  allPricesIsDiscounted,
  label,
  price,
}: RowProps) {
  const intl = useIntl()
  const totalPrice = formatPrice(
    intl,
    price.local.price,
    price.local.currency,
    price.local.additionalPrice,
    price.local.additionalPriceCurrency
  )
  const regularPrice = price.local.regularPrice
    ? formatPrice(
        intl,
        price.local.regularPrice,
        price.local.currency,
        price.local.additionalPrice,
        price.local.additionalPriceCurrency
      )
    : null

  const isDiscounted =
    allPricesIsDiscounted ||
    (price.local.regularPrice !== undefined &&
      price.local.regularPrice > price.local.price)
  return (
    <Typography variant="Body/Paragraph/mdBold">
      <tr className={styles.row}>
        <td>
          <span>{label}</span>
        </td>
        <td className={styles.price}>
          {isDiscounted && regularPrice ? (
            <>
              <Typography variant="Body/Paragraph/mdRegular">
                <s className={styles.strikeThroughRate}>{regularPrice}</s>
              </Typography>
            </>
          ) : null}
          <span className={cx({ [styles.discounted]: isDiscounted })}>
            {totalPrice}
          </span>
        </td>
      </tr>
    </Typography>
  )
}