import { useIntl } from "react-intl"

import useLang from "@/hooks/useLang"

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

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

export default function LevelSummary({
  level,
  showDescription = true,
}: LevelSummaryProps) {
  const lang = useLang()
  const intl = useIntl()
  return (
    <div className={styles.levelSummary}>
      <span className={styles.levelRequirements}>
        {level.required_points.toLocaleString(lang)}
        {"p "}
        {level.required_nights
          ? `${intl.formatMessage({ id: "or" })} ${level.required_nights} ${intl.formatMessage({ id: "nights" })}`
          : ""}
      </span>
      {showDescription && (
        <p className={styles.levelSummaryText}>{level.description}</p>
      )}
    </div>
  )
}