import { cn } from "../../lib/cn";

export function Stepper({
  currentStep,
  steps,
}: {
  currentStep: number;
  steps: string[];
}) {
  return (
    <div className="grid gap-3">
      {steps.map((step, index) => {
        const completed = index + 1 <= currentStep;
        return (
          <div className="flex items-center gap-3" key={step}>
            <span
              className={cn(
                "flex h-7 w-7 items-center justify-center rounded-full border text-xs font-medium",
                completed
                  ? "border-[var(--uhuru-border-strong)] bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                  : "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-secondary)]",
              )}
            >
              {index + 1}
            </span>
            <span className="text-sm text-[var(--uhuru-text-primary)]">{step}</span>
          </div>
        );
      })}
    </div>
  );
}