import { cn } from '@/lib/utils';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useState } from 'react';

interface ProgressBarProps {
    value: number;
    className?: string;
    onClick?: () => void;
}

export default function ProgressBar({ 
    value, 
    className,
    onClick
}: ProgressBarProps) {
    const [currentMilestoneIndex, setCurrentMilestoneIndex] = useState(0);

    // Milestone definitions
    const milestones = [
        { target: 1500, label: '1.5K', color: 'bg-blue-500' },
        { target: 3000, label: '3K', color: 'bg-green-500' },
        { target: 4500, label: '4.5K', color: 'bg-yellow-500' },
        { target: 6000, label: '6K', color: 'bg-red-500' },
    ];

    const currentMilestone = milestones[currentMilestoneIndex];
    const progress = Math.min((value / currentMilestone.target) * 100, 100);
    const isCompleted = value >= currentMilestone.target;

    // Milestone navigation
    const nextMilestone = () => {
        setCurrentMilestoneIndex((prev) => 
            prev < milestones.length - 1 ? prev + 1 : 0
        );
    };

    const prevMilestone = () => {
        setCurrentMilestoneIndex((prev) => 
            prev > 0 ? prev - 1 : milestones.length - 1
        );
    };

    return (
        <div 
            className={cn(
                "bg-black border-4 border-gray-800 rounded-lg",
                "shadow-2xl shadow-red-500/20 cursor-pointer",
                "transition-all duration-300",
                "hover:shadow-red-500/40 hover:border-red-600",
                "p-8 text-center",
                className
            )}
            onClick={onClick}
        >
            <div className="text-red-500 text-2xl font-mono tracking-wide">
                PROGRESS BAR
            </div>
        </div>
    );
}