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

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

interface ProgressCardLowerLevelProps {
  earned: number
  toNext: number
  toKeepCurrent?: number
}

export default function ProgressCardLowerLevel({
  earned,
  toNext,
  toKeepCurrent,
}: ProgressCardLowerLevelProps) {
  const progress = calculateProgress(earned, earned + toNext, toKeepCurrent)

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