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()

  let pointsMsg: React.ReactNode = intl.formatMessage(
    { id: "{pointsAmount, number} points" },
    { pointsAmount: level.required_points }
  )

  if (level.required_nights) {
    pointsMsg = 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>,
      }
    )
  }

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