/**
 * WizardStepIndicator — Shared numbered step indicator for multi-step wizards.
 * 
 * Used by DataImport and DataExport wizards.
 */
import React from 'react';
import { Check } from 'lucide-react';

interface WizardStepIndicatorProps {
    steps: string[];
    currentStep: number;
}

export const WizardStepIndicator: React.FC<WizardStepIndicatorProps> = ({ steps, currentStep }) => (
    <div className="flex items-center justify-center gap-2 mb-8">
        {steps.map((label, i) => (
            <React.Fragment key={label}>
                <div className={`flex items-center gap-2 ${i <= currentStep ? 'text-blue-600' : 'text-slate-400'}`}>
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${i < currentStep ? 'bg-blue-600 text-white' :
                            i === currentStep ? 'bg-blue-100 text-blue-600 ring-2 ring-blue-600' :
                                'bg-slate-100 text-slate-400'
                        }`}>
                        {i < currentStep ? <Check size={16} /> : i + 1}
                    </div>
                    <span className="hidden sm:inline text-sm font-medium">{label}</span>
                </div>
                {i < steps.length - 1 && (
                    <div className={`w-8 h-0.5 ${i < currentStep ? 'bg-blue-600' : 'bg-slate-200'}`} />
                )}
            </React.Fragment>
        ))}
    </div>
);