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 { PointsColumnProps } from "@/types/components/myPages/points"

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

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

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