'use client';

import React from 'react';
import { CheckCircle2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';

const STEP_KEYS = ['vehicle', 'device', 'wiring', 'validation', 'photos', 'summary'] as const;

interface Props {
  currentStep: number;
}

export function WizardStepper({ currentStep }: Props) {
  const { t } = useTranslation();

  return (
    <div className="bg-white border-b border-border px-3 py-3 sticky top-0 z-10 shadow-sm">
      <div className="flex items-center justify-between max-w-3xl mx-auto">
        {STEP_KEYS.map((key, idx) => {
          const stepNumber = idx + 1;
          const isCompleted = idx < currentStep;
          const isActive = idx === currentStep;

          return (
            <div key={key} className="flex items-center flex-1 last:flex-none">
              <div className="flex flex-col items-center gap-0.5">
                <div
                  className={`step-dot ${isCompleted ? 'completed' : isActive ? 'active' : 'pending'}`}
                >
                  {isCompleted ? <CheckCircle2 className="w-4 h-4" /> : <span>{stepNumber}</span>}
                </div>
                <span
                  className={`text-[9px] font-medium leading-tight ${
                    isActive ? 'text-primary' : isCompleted ? 'text-emerald-600' : 'text-muted-foreground'
                  }`}
                >
                  {t(`wizard.steps.${key}`)}
                </span>
              </div>
              {idx < STEP_KEYS.length - 1 && (
                <div className={`step-line ${isCompleted ? 'completed' : 'pending'}`} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}