web/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx

import { useIntl } from "react-intl"

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

import styles from "./levelSummary.module.css"

import type { LevelSummaryProps } from "@/types/components/overviewTable"

export default function LevelSummary({
  level,
  showDescription = true,
}: LevelSummaryProps) {
  const intl = useIntl()

  const pointsMsg: React.ReactNode = level.required_nights
    ? intl.formatMessage(
        {
          id: "overviewTable.levelSummary.pointsOrNights",
          defaultMessage:
            "{pointsAmount, number} points or {nightsAmount, number} nights",
        },
        {
          pointsAmount: level.required_points,
          nightsAmount: level.required_nights,
        }
      )
    : intl.formatMessage(
        {
          id: "common.pointsAmountPoints",
          defaultMessage: "{pointsAmount, number} points",
        },
        { pointsAmount: level.required_points }
      )

  return (
    <div className={styles.levelSummary}>
      <Typography variant="Label/xsRegular">
        <span className={styles.levelRequirements}>{pointsMsg}</span>
      </Typography>
      {showDescription && (
        <p className={styles.levelSummaryText}>{level.description}</p>
      )}
    </div>
  )
}