"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)} {intl.formatMessage({ id: "Points" })}
      </p>
    </Typography>
  )
}