'use client';

import { Check } from 'lucide-react';

interface Step {
  id: string;
  name: string;
  description?: string;
}

interface WizardStepperProps {
  steps: Step[];
  currentStep: number;
  onStepClick?: (index: number) => void;
}

export function WizardStepper({ steps, currentStep, onStepClick }: WizardStepperProps) {
  return (
    <nav aria-label="Progress">
      <ol className="flex items-center gap-2">
        {steps.map((step, index) => {
          const isCompleted = index < currentStep;
          const isCurrent = index === currentStep;
          const isClickable = onStepClick && index <= currentStep;

          return (
            <li key={step.id} className="flex items-center gap-2 flex-1">
              <button
                type="button"
                onClick={() => isClickable && onStepClick(index)}
                disabled={!isClickable}
                className={`
                  flex items-center gap-3 w-full px-3 py-2.5 rounded-lg transition-colors duration-150
                  ${isClickable ? 'cursor-pointer' : 'cursor-default'}
                  ${isCurrent
                    ? 'bg-indigo-50 border border-indigo-200'
                    : isCompleted
                    ? 'bg-white border border-stone-200 hover:bg-stone-50'
                    : 'bg-stone-50 border border-transparent'
                  }
                `}
              >
                <span
                  className={`
                    flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold
                    ${isCompleted
                      ? 'bg-indigo-600 text-white'
                      : isCurrent
                      ? 'bg-indigo-600 text-white'
                      : 'bg-stone-200 text-stone-500'
                    }
                  `}
                >
                  {isCompleted ? (
                    <Check className="h-3.5 w-3.5" />
                  ) : (
                    <span>{index + 1}</span>
                  )}
                </span>
                <span className="flex flex-col min-w-0 text-left">
                  <span
                    className={`text-sm font-medium truncate ${
                      isCurrent ? 'text-indigo-700' : isCompleted ? 'text-stone-700' : 'text-stone-400'
                    }`}
                  >
                    {step.name}
                  </span>
                  {step.description && (
                    <span className={`text-xs truncate ${isCurrent ? 'text-indigo-500' : 'text-stone-400'}`}>
                      {step.description}
                    </span>
                  )}
                </span>
              </button>

              {index !== steps.length - 1 && (
                <div
                  className={`w-8 h-px flex-shrink-0 ${isCompleted ? 'bg-indigo-300' : 'bg-stone-200'}`}
                  aria-hidden="true"
                />
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}
