web/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx

"use client"

import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

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

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

import type { ProgressCalculation } from "../../types"

interface ProgressSectionProps {
  earned: number
  progress: ProgressCalculation
  toKeepCurrent?: number
}

export default function ProgressSection({
  earned,
  progress,
  toKeepCurrent,
}: ProgressSectionProps) {
  const intl = useIntl()
  const hasMarkerPosition = progress.markerPosition !== undefined

  return (
    <div
      className={cx(styles.progressSection, {
        [styles.hasMarker]: hasMarkerPosition,
      })}
    >
      <div className={styles.progressContainer}>
        <Progress
          value={progress.percentage}
          aria-label={intl.formatMessage(
            {
              defaultMessage:
                "Level progress: {earned} of {total} points earned",
            },
            {
              earned: intl.formatNumber(earned),
              total: intl.formatNumber(progress.total),
            }
          )}
        />

        {hasMarkerPosition && toKeepCurrent && (
          <div
            className={styles.levelMarker}
            style={{ left: `${progress.markerPosition}%` }}
          >
            <div className={styles.markerPin} />
            <div className={styles.markerLine} />
          </div>
        )}
      </div>

      {hasMarkerPosition && toKeepCurrent && (
        <div className={styles.markerLabelContainer}>
          <span
            className={styles.markerLabel}
            style={
              {
                "--marker-pos": `${progress.markerPosition}%`,
              } as React.CSSProperties
            }
          >
            {intl.formatMessage(
              {
                defaultMessage:
                  "{pointsAmount} <points>POINTS</points> <support>left to keep level</support>",
              },
              {
                pointsAmount: (
                  <Typography variant="Title/Overline/sm">
                    <span>{intl.formatNumber(toKeepCurrent)}</span>
                  </Typography>
                ),
                points: (str) => (
                  <Typography variant="Title/Overline/sm">
                    <span>{str}</span>
                  </Typography>
                ),
                support: (str) => (
                  <Typography variant="Body/Supporting text (caption)/smRegular">
                    <span>{str}</span>
                  </Typography>
                ),
              }
            )}
          </span>
        </div>
      )}
    </div>
  )
}