const STEP_LABELS = ["Warenkorb", "Adresse", "Zahlung", "Abschluss"];
type StepState = "done" | "active" | "upcoming";
function StepCircle({ state, number }: { state: StepState; number: number }) {
if (state === "done") {
return (
);
}
if (state === "active") {
return (
{number}
);
}
return (
// border-[#c4b8a0], not the shared border-border (#e5e0d8) — nearly the
// same luminance as the page's own bg-bg-base (#f8f5f1), barely visible
// (fixed 2026-07-24, feedback: "die Striche bei den Nummern-Steps sind
// zu hell"). Same color as the connector line below and the checkout
// step cards' own border fix, for consistency.
{number}
);
}
// Shared by /checkout (mid-flow, one step active) and /bestellbestaetigung
// (every step done — `current` past the last step number makes every
// stepNum < current true, so passing STEP_LABELS.length + 1 there marks
// the whole bar complete without a separate "all done" branch).
export function CheckoutSteps({ current }: { current: number }) {
return (
{STEP_LABELS.map((label, i) => {
const stepNum = i + 1;
const state: StepState = stepNum < current ? "done" : stepNum === current ? "active" : "upcoming";
return (