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

export interface Step {
  id: number;
  title: string;
  description: string;
}

interface Props {
  steps: Step[];
  current: number;
  onJump?: (id: number) => void;
}

export function WizardStepper({ steps, current, onJump }: Props) {
  return (
    <ol className="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-6">
      {steps.map((s) => {
        const done = s.id < current;
        const active = s.id === current;
        return (
          <li key={s.id}>
            <button
              type="button"
              onClick={() => onJump?.(s.id)}
              className={cn(
                "w-full text-left rounded-lg border p-3 transition-all",
                active && "border-primary bg-primary/5 shadow-sm",
                done && "border-success/40 bg-success/5",
                !active && !done && "border-border hover:border-primary/40",
              )}
            >
              <div className="flex items-center gap-2">
                <span
                  className={cn(
                    "grid h-5 w-5 place-items-center rounded-full text-[10px] font-semibold",
                    active && "bg-primary text-primary-foreground",
                    done && "bg-success text-success-foreground",
                    !active && !done && "bg-muted text-muted-foreground",
                  )}
                >
                  {done ? <Check className="h-3 w-3" /> : s.id}
                </span>
                <span className="text-xs font-medium truncate">{s.title}</span>
              </div>
              <div className="mt-1 text-[10px] text-muted-foreground truncate">{s.description}</div>
            </button>
          </li>
        );
      })}
    </ol>
  );
}