import { useIntl } from "react-intl"

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<React.ReactNode>(
        {
          id: "{pointsAmount, number} points or {nightsAmount, number} nights",
        },
        {
          pointsAmount: level.required_points,
          nightsAmount: level.required_nights,
          highlight: (str) => <span className={styles.redText}>{str}</span>,
        }
      )
    : intl.formatMessage(
        { id: "{pointsAmount, number} points" },
        { pointsAmount: level.required_points }
      )

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