import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

import type {
  NightsColumn,
  PointsColumn,
  PointsColumnProps,
} from "@/types/components/myPages/points"

export const YourPointsColumn = ({ points }: PointsColumn) =>
  PointsColumn({
    points,
    title: "Your points to spend",
    subtitle: "as of today",
  })

export const NextLevelPointsColumn = ({
  points,
  subtitleParam,
}: PointsColumn) =>
  PointsColumn({
    points,
    title: "Points needed to level up",
    subtitleParam,
    subtitle: "next level:",
  })

export const StayOnLevelColumn = ({ points, subtitleParam }: PointsColumn) =>
  PointsColumn({
    points,
    title: "Points needed to stay on level",
    subtitleParam,
    subtitle: "by",
  })

export const NextLevelNightsColumn = ({
  nights,
  subtitleParam,
}: NightsColumn) =>
  PointsColumn({
    nights,
    title: "Nights needed to level up",
    subtitleParam,
    subtitle: "by",
  })

async function PointsColumn({
  points,
  nights,
  title,
  subtitle,
  subtitleParam,
}: PointsColumnProps) {
  const { formatMessage } = await getIntl()

  return (
    <article className={styles.article}>
      <Body
        color="white"
        textTransform="bold"
        textAlign="center"
        className={styles.firstRow}
      >
        {formatMessage({
          id: title,
        })}
      </Body>
      <Title color="white" level="h2" textAlign="center">
        {points ?? nights ?? "N/A"}
      </Title>
      <Body color="white" textAlign="center">
        {formatMessage({ id: subtitle })} {subtitleParam}
      </Body>
    </article>
  )
}
