import React from 'react';
import { motion } from 'framer-motion';

interface ProgressBarProps {
  progress: number;
  color?: string;
  label?: string;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({ progress, color = '#10b981', label }) => {
  return (
    <div className="w-full">
      <div className="relative h-2 bg-black/30 rounded-full overflow-hidden">
        <motion.div
          className="absolute top-0 left-0 h-full rounded-full"
          style={{ backgroundColor: color }}
          initial={{ width: 0 }}
          animate={{ width: `${progress}%` }}
          transition={{ duration: 0.5 }}
        />
      </div>
      {label && (
        <div className="flex justify-between items-center mt-1">
          <span className="text-xs text-gray-400">{label}</span>
          <span className="text-xs" style={{ color }}>{progress}%</span>
        </div>
      )}
    </div>
  );
};