'use client'

import { useTranslations } from 'next-intl'
import { Check } from 'lucide-react'

interface CheckoutStepsProps {
  currentStep: 2 | 3
}

export default function CheckoutSteps({ currentStep }: CheckoutStepsProps) {
  const t = useTranslations('Checkout')

  const steps = [
    { number: 1, title: t('stepCart'), description: t('stepReviewItems') },
    { number: 2, title: t('stepCheckout'), description: t('stepShippingPayment') },
    { number: 3, title: t('stepConfirmation'), description: t('stepOrderComplete') },
  ]

  return (
    <div className="mb-8">
      <div className="flex items-center justify-center">
        {steps.map((step, index) => (
          <div key={step.number} className="flex items-center">
            <div className="text-center">
              <div
                className={`w-10 h-10 rounded-full flex items-center justify-center mx-auto transition-all ${
                  currentStep >= step.number
                    ? 'bg-gradient-primary text-white'
                    : 'bg-gray-100 text-gray-custom'
                }`}
              >
                {currentStep > step.number ? <Check size={18} /> : step.number}
              </div>
              <p className={`text-xs mt-1 ${currentStep >= step.number ? 'text-primary font-medium' : 'text-gray-custom'}`}>
                {step.title}
              </p>
            </div>
            {index < steps.length - 1 && (
              <div className={`w-16 h-px mx-2 ${currentStep > step.number ? 'bg-primary' : 'bg-gray-200'}`} />
            )}
          </div>
        ))}
      </div>
    </div>
  )
}