"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 styles from "./price.module.css"

export type Variant =
  | "Title/Subtitle/lg"
  | "Title/Subtitle/md"
  | "Body/Paragraph/mdBold"

export default function Price({
  price,
  variant,
  isMember,
}: {
  price: number | null
  variant: Variant
  isMember?: boolean
}) {
  const intl = useIntl()
  const currencyCode = useMyStayTotalPriceStore((state) => state.currencyCode)

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

  return (
    <Typography variant={variant}>
      <p className={isMember ? styles.memberPrice : styles.nonMemberPrice}>
        {formatPrice(intl, price, currencyCode)}
      </p>
    </Typography>
  )
}