Step walker

"use client"

import * as React from "react"
import { StepWalker } from "@/components/step-walker"
import { Button } from "@/components/ui/button"

const stages = ["Choose a repository", "Consent", "First read"]

const body = [
  "Pick the repository Keel should learn first. You can add more later.",
  "See exactly what Keel reads and where it goes, then allow it.",
  "Keel reads acme-api: tables, migrations and flags. You can ask questions while it reads.",
]

export default function Example() {
  const [stage, setStage] = React.useState(0)
  const last = stage === stages.length - 1
  return (
    <StepWalker className="w-full max-w-xl" stages={stages} current={stage} onGoTo={setStage}>
      <div className="rounded-xl border bg-card p-5">
        <h3 className="text-base font-semibold">{stages[stage]}</h3>
        <p className="mt-1 text-sm text-muted-foreground">{body[stage]}</p>
        <div className="mt-4 flex justify-end">
          <Button size="sm" variant={last ? "ghost" : "default"} onClick={() => setStage(last ? 0 : stage + 1)}>
            {last ? "Start over" : "Continue"}
          </Button>
        </div>
      </div>
    </StepWalker>
  )
}