'use client'

import { Check } from 'lucide-react'

interface ProgressStepperProps {
  step: number
  basketItemsCount: number
}

export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
  return (
    <div className="max-w-md mx-auto mb-12">
      <div className="flex justify-between relative">
        <div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
        {[1, 2, 3, 4].map(s => (
          <div key={s} className="relative z-10 flex flex-col items-center gap-2">
            <div
              className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${
                step >= s
                  ? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
                  : 'bg-slate-800 text-slate-400'
              }`}
            >
              {step > s ? <Check className="w-5 h-5" /> : s}
            </div>
            <span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'} flex items-center gap-1`}>
              {s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
              {s === 3 && basketItemsCount > 0 && (
                <span className="bg-primary text-white text-[9px] w-4 h-4 rounded-full flex items-center justify-center font-bold px-1.5 leading-none">
                  {basketItemsCount}
                </span>
              )}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}