Stepper

"use client"

import * as React from "react"
import { Stepper, type StepperStep } from "@/components/candor/ui/stepper"
import { Button } from "@/components/candor/ui/button"

// What each step has really been through is the app's data: "done" is set by the save, not by pressing the step.
export default function Example() {
  const [current, setCurrent] = React.useState("details")
  const [saved, setSaved] = React.useState<string[]>([])
  const steps: StepperStep[] = [
    { id: "details", title: "Details", description: "Name and region", done: saved.includes("details") },
    { id: "access", title: "Access", description: "Who can open it", done: saved.includes("access") },
    {
      id: "review",
      title: "Review",
      description: "Check before creating",
      locked: saved.includes("details") && saved.includes("access") ? null : "Save Details and Access first.",
    },
  ]
  return (
    <div className="flex max-w-xl flex-col gap-4">
      <Stepper steps={steps} current={current} onStepSelect={setCurrent} label="New project" />
      <div className="flex gap-2">
        <Button
          size="sm"
          variant="outline"
          onClick={() => setSaved((all) => (all.includes(current) ? all : [...all, current]))}
          disabled={current === "review"}
        >
          Save this step
        </Button>
      </div>
    </div>
  )
}