import React from 'react';

type Props = {
  value: number;
  max?: number;
  color?: string;
  label?: string;
};

const ProgressBar = ({ value, max = 100, color = 'emerald', label }: Props) => {
  const percentage = Math.max(0, Math.min(100, Math.round((value / max) * 100)));

  const colors: Record<string, string> = {
    emerald: 'bg-emerald-500 shadow-sm shadow-emerald-500/20',
    green: 'bg-emerald-500 shadow-sm shadow-emerald-500/20',
    yellow: 'bg-amber-400 shadow-sm shadow-amber-400/20',
    red: 'bg-rose-500 shadow-sm shadow-rose-500/20',
    rose: 'bg-rose-500 shadow-sm shadow-rose-500/20',
  };

  const bgColor = colors[color] || colors.emerald;

  return (
    <div className="w-full animate-fade-in">
      {label && (
        <div className="flex justify-between mb-2 items-baseline">
          <span className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-400">{label}</span>
          <span className="text-sm font-black text-slate-800 dark:text-white">{percentage}%</span>
        </div>
      )}
      <div className="w-full bg-slate-100 rounded-full h-3 dark:bg-slate-800 overflow-hidden shadow-inner">
        <div
          className={`${bgColor} h-3 rounded-full transition-all duration-1000 ease-out`}
          style={{ width: `${percentage}%` }}
        ></div>
      </div>
    </div>
  );
};

export default ProgressBar;