import { cn } from '@/lib/utils';
import type { Milestone } from '@/types/domain';

interface ProgressBarProps {
    currentQuantity: number;
    milestones: Milestone[];
    selectedMilestoneIndex?: number;
    className?: string;
    onClick?: () => void;
}

export default function ProgressBar({
    currentQuantity,
    milestones,
    selectedMilestoneIndex = 0,
    className,
    onClick
}: ProgressBarProps) {
    const selectedMilestone = milestones.length > 0 && selectedMilestoneIndex < milestones.length
        ? milestones[selectedMilestoneIndex]
        : null;

    const progressPercentage = selectedMilestone
        ? Math.min((currentQuantity / selectedMilestone.target) * 100, 100)
        : 0;
    return (
        <div 
            className={cn(
                "bg-black cursor-pointer",
                "transition-all duration-300",
                "p-8",
                className
            )}
            onClick={onClick}
        >
            {/* Progress Bar Container */}
            <div className="w-full">
                {/* Old-school progress bar with overlaid text */}
                 <div className="w-full border-4 border-red-500 p-2 bg-black relative overflow-hidden glow-red">
                    {/* Inner container */}
                    <div className="relative h-8">
                        {/* Progress fill */}
                        <div 
                            className="absolute top-0 left-0 h-full bg-red-500 transition-all duration-500 ease-out"
                            style={{ width: `${progressPercentage}%` }}
                        />
                        
                        {/* Text overlay */}
                        {selectedMilestone && (
                            <div className="relative h-full flex items-center justify-center">
                                {/* Base text (red on black background) */}
                                <div className="text-red-500 font-mono text-sm font-bold mix-blend-difference relative z-10">
                                    {progressPercentage.toFixed(1)}%
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}