incr/resources/js/components/Display/ProgressBar.tsx

import { cn } from '@/lib/utils';

interface Milestone {
    target: number;
    description: string;
    created_at: string;
}

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

export default function ProgressBar({ 
    currentShares,
    milestones,
    selectedMilestoneIndex = 0,
    className,
    onClick
}: ProgressBarProps) {
    // Get the selected milestone for progress calculation
    const selectedMilestone = milestones.length > 0 && selectedMilestoneIndex < milestones.length 
        ? milestones[selectedMilestoneIndex] 
        : null;
    
    // Calculate progress percentage
    const progressPercentage = selectedMilestone 
        ? Math.min((currentShares / 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">
                    {/* 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>
    );
}