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 (
// Back to the shared border-border (reverted 2026-07-24 per feedback —
// only the connector line below should be the darker #c4b8a0).
{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 (