import { motion } from 'framer-motion';
import { cn } from '@/lib/cn';

interface ProgressBarProps {
  value: number;
  max?: number;
  color?: 'amber' | 'green' | 'red' | 'blue';
  height?: number;
  indeterminate?: boolean;
  className?: string;
}

const colorStyles = {
  amber: 'bg-amber-500',
  green: 'bg-green-500',
  red: 'bg-red-500',
  blue: 'bg-blue-500',
};

export function ProgressBar({
  value,
  max = 100,
  color = 'amber',
  height = 4,
  indeterminate = false,
  className,
}: ProgressBarProps) {
  const percentage = Math.min((value / max) * 100, 100);

  return (
    <div
      className={cn('w-full rounded-full bg-white/5 overflow-hidden', className)}
      style={{ height }}
    >
      {indeterminate ? (
        <div
          className={cn('h-full rounded-full animate-shimmer', colorStyles[color])}
          style={{ width: '40%' }}
        />
      ) : (
        <motion.div
          className={cn('h-full rounded-full', colorStyles[color])}
          initial={{ width: 0 }}
          animate={{ width: `${percentage}%` }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
        />
      )}
    </div>
  );
}
