import { motion } from "motion/react";
import clsx, { type ClassValue } from "clsx";

import Counter from "@components/atoms/Counter";
import classes from "./Progress.module.css";

type Props = {
  className?: ClassValue;
  value: number;
  max: number;
  variant: "green" | "yellow";
};

const VARIANTS_MAP = {
  green: classes.greenProgress,
  yellow: classes.yellowProgress,
} satisfies Record<Props["variant"], string>;

const TEXT_VARIANTS_MAP = {
  green: classes.greenText,
  yellow: classes.yellowText,
} satisfies Record<Props["variant"], string>;

export default function Progress({ className, value, max, variant }: Props) {
  const percentage = max > 0 ? (value / max) * 100 : 0;

  return (
    <div className={clsx(classes.container, className)}>
      <motion.div
        className={clsx(classes.progressBar, VARIANTS_MAP[variant])}
        initial={{ width: 0 }}
        animate={{ width: `${percentage}%` }}
        transition={{ type: "spring", stiffness: 60, damping: 15 }}
      />
      <span className={clsx(classes.text, TEXT_VARIANTS_MAP[variant])}>
        <Counter value={value} /> / {<Counter value={max} />}
      </span>
    </div>
  );
}
