'use client';

interface Step {
  readonly id: string;
  readonly label: string;
  readonly icon: string;
}

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

export default function ProductFormStepper({
  steps,
  currentStep,
  onStepClick,
}: ProductFormStepperProps) {
  return (
    <div className="w-full py-4">
      <div className="flex items-center justify-between">
        {steps.map((step, index) => {
          const isCompleted = index < currentStep;
          const isCurrent   = index === currentStep;
          const isPending   = index > currentStep;

          return (
            <div key={step.id} className="flex items-center flex-1">
              {/* Step button */}
              <button
                type="button"
                onClick={() => onStepClick(index)}
                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all"
                style={{
                  background: isCurrent
                    ? 'var(--color-cta)'
                    : isCompleted
                    ? 'color-mix(in srgb, var(--color-cta) 60%, transparent)'
                    : 'var(--color-surface-alt)',
                  color: isPending
                    ? 'var(--color-text-secondary)'
                    : 'white',
                  border: isCurrent
                    ? '2px solid var(--color-cta)'
                    : isCompleted
                    ? '2px solid transparent'
                    : '1px solid var(--color-border)',
                  opacity: isPending ? 0.6 : 1,
                }}
              >
                <span>{step.icon}</span>
                <span className="hidden md:inline">{step.label}</span>

                {/* Completed checkmark */}
                {isCompleted && (
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="3"
                    className="hidden md:block"
                  >
                    <path d="M20 6L9 17l-5-5" />
                  </svg>
                )}
              </button>

              {/* Connector line */}
              {index < steps.length - 1 && (
                <div
                  className="flex-1 h-0.5 mx-2 transition-all duration-300"
                  style={{
                    background: isCompleted
                      ? 'var(--color-cta)'
                      : 'var(--color-border)',
                  }}
                />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}