import { calculateProgress } from "../utils"
import ProgressSection from "./ProgressSection"
import StatsSection from "./StatsSection"

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

interface ProgressCardHighestLevelProps {
  earned: number
  required: number
  toKeepCurrent?: number
}

export default function ProgressCardHighestLevel({
  earned,
  required,
  toKeepCurrent,
}: ProgressCardHighestLevelProps) {
  const progress = calculateProgress(earned, required, toKeepCurrent)

  return (
    <div className={styles.innerCard}>
      <StatsSection earned={earned} showTrophy />
      <ProgressSection
        earned={earned}
        progress={progress}
        toKeepCurrent={toKeepCurrent}
      />
    </div>
  )
}