0pt/components/order-stepper.tsx

"use client";

import Link from "next/link";
import { useT } from "@/components/locale-provider";

const STEPS = [
  { n: 1, label: { en: "Configure", sv: "Konfigurera" }, href: "/bestall" },
  { n: 2, label: { en: "Deposit", sv: "Förskott" }, href: "/bestall/forskott" },
  { n: 3, label: { en: "Production", sv: "Produktion" }, href: null },
  { n: 4, label: { en: "Validate", sv: "Validera" }, href: null },
] as const;

/** Mono 4-step indicator. Active step carries the single red marker. */
export function OrderStepper({ active }: { active: 1 | 2 | 3 | 4 }) {
  const t = useT();
  return (
    <nav
      aria-label={t({ en: "Order steps", sv: "Beställningssteg" })}
      className="flex w-full items-center gap-0 border-b border-border bg-background"
    >
      {STEPS.map((s, i) => {
        const isActive = s.n === active;
        const isDone = s.n < active;
        const inner = (
          <span className="flex items-center gap-3">
            <span
              className="flex h-6 w-6 items-center justify-center font-mono text-[11px]"
              style={{
                backgroundColor: isActive ? "var(--accent-red)" : isDone ? "var(--foreground)" : "transparent",
                color: isActive || isDone ? "#fff" : "var(--muted-foreground)",
                border: isActive || isDone ? "none" : "1px solid var(--border)",
              }}
            >
              {s.n}
            </span>
            <span
              className="font-mono text-[11px] uppercase tracking-[0.12em]"
              style={{ color: isActive ? "var(--foreground)" : "var(--muted-foreground)" }}
            >
              {t(s.label)}
            </span>
          </span>
        );
        return (
          <div
            key={s.n}
            className="flex flex-1 items-center justify-center border-r border-border px-4 py-3 last:border-r-0"
            aria-current={isActive ? "step" : undefined}
          >
            {s.href && (isDone || isActive) ? (
              <Link href={s.href} className="transition-opacity hover:opacity-70">
                {inner}
              </Link>
            ) : (
              inner
            )}
          </div>
        );
      })}
    </nav>
  );
}