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

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

  const totalPrice = formatPrice(
    intl,
    points,
    CurrencyEnum.POINTS,
    price,
    currencyCode
  )

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