import {levelCalculator} from "@/resources/level";
import clsx from "clsx";

interface Props {
	experience: number;
	className?: string;
	progressBarWidth?: string;
}

export default function LevelProgressBar({experience, className, progressBarWidth = "w-32 md:w-64"}: Props) {
	const levelResult = levelCalculator(experience);

	return (
		<div className={clsx("flex flex-col items-center", className)}>
			<div className="flex gap-3 items-center text-sm md:text-base">
				<span>Lvl. {levelResult.currentLevel}</span>
				<progress className={clsx("progress progress-success", progressBarWidth)} value={levelResult.percentage} max="100" />
				<span>Lvl. {levelResult.nextLevel}</span>
			</div>
			<span className="text-xs">
				{experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
			</span>
		</div>
	);
}