/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {levelCalculator} from "@/resources/level";
import clsx from "clsx";
import LevelLabel from "./LevelLabel";
import LevelProgressBar from "./LevelProgressBar";

interface Props {
	user: User;
	className?: string;
}

export default function ProfileLevel({user, className}: Props) {
	const levelResult = levelCalculator(user.experience);

	return (
		<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
			<div className="w-24 rounded-full">
				<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
			</div>
			<div className="flex flex-col gap-1 items-center">
				<LevelLabel experience={user.experience} />
				<LevelProgressBar experience={user.experience} className="text-black" />
			</div>
		</div>
	);
}
