Stepper

import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

type Step = { title: string; hint?: string };

export function Stepper({ steps, current }: { steps: Step[]; current: number }) {
  return (
    <ol aria-label="Progress" className="grid w-full" style={{ gridTemplateColumns: "repeat(" + steps.length + ", minmax(0, 1fr))" }}>
      {steps.map((step, i) => {
        const state = i < current ? "done" : i === current ? "current" : "upcoming";
        return (
          <li key={step.title} aria-current={state === "current" ? "step" : undefined}
            className="relative grid min-w-0 justify-items-center gap-2 px-1 text-center">
            {i > 0 && (
              <span aria-hidden className={cn(
                "absolute left-[calc(-50%+22px)] right-[calc(50%+22px)] top-[13px] h-0.5 rounded-full",
                i <= current ? "bg-primary" : "bg-border",
              )} />
            )}
            <span className={cn(
              "relative grid size-7 place-items-center rounded-full border-[1.5px] text-[12.5px] font-medium tabular-nums",
              state === "done" && "border-primary bg-primary text-primary-fg",
              state === "current" && "border-primary bg-bg text-primary ring-4 ring-primary/15",
              state === "upcoming" && "border-border-strong bg-bg text-fg-muted",
            )}>
              {state === "done" ? <Check className="size-3.5" aria-label="Done" /> : i + 1}
            </span>
            <span className={cn("text-[13px] font-medium leading-tight", state === "upcoming" ? "text-fg-muted" : "text-fg")}>
              {step.title}
            </span>
            {step.hint && <span className="-mt-1 text-xs leading-tight text-fg-subtle">{step.hint}</span>}
          </li>
        );
      })}
    </ol>
  );
}

// <Stepper current={2} steps={[{ title: "Account" }, { title: "Business" }, { title: "Bank account" }, { title: "Go live" }]} />