StepperStepper

"use client";

import * as React from "react";
import { Stepper, type StepperStep } from "@/components/ui/notchset/stepper";

const steps: StepperStep[] = [
  { label: "Connect", description: "Add your API key" },
  { label: "Pick agents", description: "Planner, Triage" },
  { label: "Run evals", description: "1,200 cases" },
];

export function Onboarding() {
  const [step, setStep] = React.useState(1);
  return (
    <div className="grid gap-3">
      <Stepper steps={steps} value={step} orientation="horizontal" />
      <button type="button" onClick={() => setStep((s) => Math.min(steps.length, s + 1))}>
        Next
      </button>
    </div>
  );
}