'use client';

interface Step {
    label: string;
    isCompleted: boolean;
    isCurrent: boolean;
}

interface StepIndicatorProps {
    steps: Step[];
}

export default function StepIndicator({ steps }: StepIndicatorProps) {
    return (
        <div className="flex items-center gap-0 w-full max-w-2xl">
            {steps.map((step, index) => (
                <div key={index} className="flex items-center flex-1 last:flex-none">
                    <div className="flex flex-col items-center">
                        <div
                            className={`flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-all duration-200 ${
                                step.isCompleted
                                    ? 'bg-indigo-600 text-white shadow-sm shadow-indigo-500/30'
                                    : step.isCurrent
                                    ? 'bg-indigo-100 dark:bg-indigo-500/15 text-indigo-700 dark:text-indigo-400 ring-2 ring-indigo-600 dark:ring-indigo-400'
                                    : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
                            }`}
                        >
                            {step.isCompleted ? (
                                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                            ) : (
                                index + 1
                            )}
                        </div>
                        <span
                            className={`mt-1.5 text-[10px] sm:text-xs font-medium whitespace-nowrap ${
                                step.isCurrent
                                    ? 'text-indigo-700 dark:text-indigo-400'
                                    : step.isCompleted
                                    ? 'text-gray-600 dark:text-gray-300'
                                    : 'text-gray-400 dark:text-gray-500'
                            }`}
                        >
                            {step.label}
                        </span>
                    </div>
                    {index < steps.length - 1 && (
                        <div
                            className={`flex-1 h-0.5 mx-2 mb-5 rounded-full transition-colors ${
                                step.isCompleted
                                    ? 'bg-indigo-600'
                                    : 'bg-gray-200 dark:bg-gray-800'
                            }`}
                        />
                    )}
                </div>
            ))}
        </div>
    );
}