import { motion } from 'framer-motion'
import { Check } from 'lucide-react'

interface Props {
    currentStep: number
    totalSteps: number
    stepLabels: string[]
}

export default function ProgressTracker({ currentStep, totalSteps, stepLabels }: Props) {
    return (
        <div className="space-y-1">
            <div className="flex items-center justify-between text-xs text-slate-400 font-medium mb-2">
                <span>Progress</span>
                <span>{currentStep} / {totalSteps}</span>
            </div>
            <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
                <motion.div
                    className="h-full bg-gradient-to-r from-cyan-400 to-sky-500 rounded-full"
                    initial={{ width: 0 }}
                    animate={{ width: `${(currentStep / totalSteps) * 100}%` }}
                    transition={{ duration: 0.5, ease: 'easeOut' }}
                />
            </div>
            <div className="flex justify-between mt-3">
                {stepLabels.map((label, i) => {
                    const isCompleted = i < currentStep - 1
                    const isCurrent = i === currentStep - 1
                    return (
                        <div key={i} className="flex flex-col items-center gap-1" style={{ width: `${100 / totalSteps}%` }}>
                            <div className={`w-6 h-6 rounded-full flex items-center justify-center text-[10px] transition-all duration-300 ${
                                isCompleted ? 'bg-cyan-400 text-black' :
                                isCurrent ? 'bg-cyan-400/20 text-cyan-400 ring-2 ring-cyan-400/50' :
                                'bg-white/5 text-slate-500'
                            }`}>
                                {isCompleted ? <Check className="w-3 h-3" /> : i + 1}
                            </div>
                            <span className={`text-[9px] text-center leading-tight hidden sm:block ${
                                isCompleted ? 'text-cyan-400' : isCurrent ? 'text-slate-200' : 'text-slate-600'
                            }`}>{label}</span>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}