"use client"
import { useIntl } from "react-intl"

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

import Caption from "@/components/TempDesignSystem/Text/Caption"
import { formatPrice } from "@/utils/numberFormatting"

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

import type { CurrencyEnum } from "@/types/enums/currency"
import type { Package } from "@/types/requests/packages"

interface DiscountedRegularPriceRowProps {
  currency: CurrencyEnum
  packages: Package[]
  regularPrice?: number
}

export default function DiscountedRegularPriceRow({
  currency,
  packages,
  regularPrice,
}: DiscountedRegularPriceRowProps) {
  const intl = useIntl()

  if (!regularPrice) {
    return null
  }

  const totalPackagesPrice = packages.reduce(
    (total, pkg) => total + pkg.localPrice.totalPrice,
    0
  )

  const price = formatPrice(intl, regularPrice + totalPackagesPrice, currency)

  return (
    <tr className={styles.row}>
      <td></td>
      <td className={styles.price}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>
            <s>{price}</s>
          </span>
        </Typography>
        <Caption color="uiTextMediumContrast" striked></Caption>
      </td>
    </tr>
  )
}