"use client"

import { useIntl } from "react-intl"

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

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

interface ProgressSectionProps {
  nightsStayed: number
  progressValue: number
  maxNights: number
  bestFriendLabel: string
}

export function ProgressSection({
  nightsStayed,
  progressValue,
  maxNights,
  bestFriendLabel,
}: ProgressSectionProps) {
  const intl = useIntl()

  return (
    <div className={styles.progressSection}>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <span className={styles.startLabelText}>
          {intl.formatMessage({
            id: "previousStays.nightsStayed",
            defaultMessage: "Nights stayed",
          })}
        </span>
      </Typography>

      <Divider variant="vertical" className={styles.startDivider} />

      <Typography variant="Title/Subtitle/md">
        <span className={styles.startValue}>{nightsStayed}</span>
      </Typography>

      <Progress
        className={styles.progressBar}
        value={progressValue}
        maxValue={maxNights}
        aria-label={intl.formatMessage(
          {
            id: "previousStays.progressAriaLabel",
            defaultMessage:
              "{nightsStayed} of {maxNights} nights stayed towards {levelName}",
          },
          {
            nightsStayed,
            maxNights,
            levelName: bestFriendLabel,
          }
        )}
      />

      <Typography variant="Title/Subtitle/md">
        <span className={styles.endValue}>{maxNights}</span>
      </Typography>

      <Divider variant="vertical" className={styles.endDivider} />

      <Typography variant="Body/Supporting text (caption)/smRegular">
        <span className={styles.endLabelText}>{bestFriendLabel}</span>
      </Typography>
    </div>
  )
}