import type { WizardStep } from "./types";

const STEPS: { step: WizardStep; label: string }[] = [
  { step: 1, label: "Total Order" },
  { step: 2, label: "Personal Details" },
  { step: 3, label: "Confirmation" },
  { step: 4, label: "Payment" },
];

/**
 * Display + guard only — the actual "can't skip forward" enforcement lives
 * in `CheckoutWizard` (this component just renders whatever `current` it's
 * given). Active = filled dark red, done = orange, upcoming = light gray.
 */
export function Stepper({ current }: { current: WizardStep }) {
  return (
    <div className="mx-auto max-w-3xl px-6 pt-8">
      {/* Mobile: compact dots + current label only. */}
      <div className="flex items-center gap-3 sm:hidden">
        <div className="flex gap-1.5">
          {STEPS.map(({ step }) => (
            <span
              key={step}
              className={`h-2 w-2 rounded-full ${
                step === current
                  ? "bg-signaturee-red"
                  : step < current
                    ? "bg-signaturee-orange"
                    : "bg-neutral-300"
              }`}
            />
          ))}
        </div>
        <p className="font-signaturee text-sm font-semibold text-signaturee-red">
          {current}. {STEPS[current - 1].label}
        </p>
      </div>

      {/* Desktop: full circle + label row. */}
      <div className="hidden items-center gap-8 sm:flex">
        {STEPS.map(({ step, label }) => (
          <div key={step} className="flex items-center gap-3">
            <span
              className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-signaturee text-lg font-semibold ${
                step === current
                  ? "bg-signaturee-red text-signaturee-cream"
                  : step < current
                    ? "bg-signaturee-orange text-signaturee-cream"
                    : "bg-neutral-200 text-neutral-500"
              }`}
            >
              {step}
            </span>
            <span className={`text-sm ${step === current ? "font-semibold text-neutral-900" : "text-neutral-500"}`}>
              {label}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}