import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"

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

interface StatsSectionProps {
  earned: number
  remaining?: number
  showTrophy?: boolean
}

export default async function StatsSection({
  earned,
  remaining,
  showTrophy = false,
}: StatsSectionProps) {
  const intl = await getIntl()
  return (
    <div className={styles.statsContainer}>
      <div className={styles.statItem}>
        <Typography variant="Title/Overline/sm">
          <span className={styles.label}>
            {intl.formatMessage({
              id: "myPages.pointsEarned",
              defaultMessage: "Points earned",
            })}
          </span>
        </Typography>

        <Typography variant="Title/md">
          <span className={styles.value} aria-describedby="points-earned-desc">
            {intl.formatNumber(earned)}
          </span>
        </Typography>
      </div>

      <div className={styles.statItem}>
        {showTrophy ? (
          <MaterialIcon
            icon="trophy"
            color="Icon/Interactive/Default"
            size={36}
            className={styles.trophyIcon}
          />
        ) : (
          <>
            <Typography variant="Title/Overline/sm">
              <span className={styles.label}>
                {intl.formatMessage({
                  id: "myPages.leftToLevelUp",
                  defaultMessage: "Left to level up",
                })}
              </span>
            </Typography>

            <Typography variant="Title/md">
              <span
                className={styles.value}
                aria-describedby="points-remaining-desc"
              >
                {intl.formatNumber(remaining ?? 0)}
              </span>
            </Typography>
          </>
        )}
      </div>
    </div>
  )
}