import React from 'react';

interface ProgressBarProps {
  value: number;
  max?: number;
  label?: string;
  className?: string;
}

export default function ProgressBar({ value, max = 100, label, className = '' }: ProgressBarProps) {
  const pct = Math.min((value / max) * 100, 100);

  return (
    <div className={`flex items-center gap-3 ${className}`}>
      <div className="flex-1 h-[6px] bg-tactical-dark/90 border border-tactical-gray/40 relative overflow-hidden">
        <div
          className="h-full transition-all duration-500 ease-out relative"
          style={{ width: `${pct}%`, background: 'linear-gradient(90deg, #3A6B35 0%, #5C7A3E 50%, #7A6B4A 100%)' }}
        >
          <div
            className="absolute inset-0"
            style={{ backgroundImage: 'repeating-linear-gradient(90deg, transparent 0px, rgba(255,255,255,0.03) 2px, transparent 4px)' }}
          />
        </div>
      </div>
      {label && <span className="text-[11px] font-bold text-tactical-textMuted whitespace-nowrap">{label}</span>}
    </div>
  );
}