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, subtitle }: PointsColumn) =>
  PointsColumn({
    points,
    title: "Points needed to level up",
    subtitle,
  })

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

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

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

  let number = "N/A"
  if (typeof points === "number") {
    number = intl.formatNumber(points)
  } else if (typeof nights === "number") {
    number = intl.formatNumber(nights)
  }

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