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

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

import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"

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

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

export default function Cheques({
  cheques,
  price,
}: {
  cheques: number
  price: number
}) {
  const intl = useIntl()
  const currencyCode = useMyStayTotalPriceStore((state) => state.currencyCode)

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

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

  return (
    <Typography variant="Title/Subtitle/lg">
      <p>{totalPrice}</p>
    </Typography>
  )
}