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

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

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

import { CurrencyEnum } from "@/types/enums/currency"

export default function Vouchers({
  currencyCode,
  isCancelled,
  price,
  vouchers,
}: {
  currencyCode: CurrencyEnum
  isCancelled: boolean
  price?: number
  vouchers: number
}) {
  const intl = useIntl()

  if (!vouchers) {
    return <SkeletonShimmer width="100px" />
  }

  const totalPrice = formatPrice(
    intl,
    vouchers,
    CurrencyEnum.Voucher,
    price,
    currencyCode
  )

  return (
    <Typography variant="Title/Subtitle/md">
      <p>{isCancelled ? <s>{totalPrice}</s> : totalPrice}</p>
    </Typography>
  )
}
