"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 Cheques({
  cheques,
  currencyCode,
  isCancelled,
  price,
}: {
  cheques: number
  currencyCode: CurrencyEnum
  isCancelled: boolean
  price: number
}) {
  const intl = useIntl()

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

  const totalPrice = formatPrice(
    intl,
    cheques,
    CurrencyEnum.CC,
    price,
    currencyCode
  )

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