"use client"

import { useIntl } from "react-intl"

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

import SkeletonShimmer from "@/components/SkeletonShimmer"

import type { Variant } from "../Rooms/TotalPrice"

export default function Points({
  points,
  variant,
}: {
  points: number | null
  variant: Variant
}) {
  const intl = useIntl()

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

  return (
    <Typography variant={variant}>
      <p>
        {intl.formatNumber(points)}
        {
          /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
          " "
        }
        {intl.formatMessage({
          defaultMessage: "Points",
        })}
      </p>
    </Typography>
  )
}