import Link from 'next/link'

interface CheckoutStepsProps {
  currentStep: 'account' | 'billing' | 'payment'
}

const steps = [
  { id: 'account', label: 'Account' },
  { id: 'billing', label: 'Billing' },
  { id: 'payment', label: 'Payment' },
]

export function CheckoutSteps({ currentStep }: CheckoutStepsProps) {
  const currentIndex = steps.findIndex((s) => s.id === currentStep)

  return (
    <div className="flex items-center justify-center mb-12">
      <div className="flex items-center gap-4">
        {steps.map((step, index) => (
          <div key={step.id} className="flex items-center">
            {index > 0 && (
              <div
                className={`w-12 h-0.5 ${
                  index <= currentIndex ? 'bg-primary' : 'bg-border'
                }`}
              />
            )}
            <Link
              href={index <= currentIndex ? `/checkout?step=${step.id}` : '#'}
              className={`flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold transition-colors ${
                index === currentIndex
                  ? 'bg-primary text-white'
                  : index < currentIndex
                  ? 'bg-primary/20 text-primary'
                  : 'bg-card border border-border text-muted-foreground'
              }`}
            >
              {index < currentIndex ? '✓' : index + 1}
            </Link>
            <span
              className={`ml-2 text-sm font-medium ${
                index === currentIndex
                  ? 'text-foreground'
                  : 'text-muted-foreground'
              }`}
            >
              {step.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}