Vertical Stepper

import { defineStepper } from "@stepperize/react";
import { Check } from "lucide-react";
import { useState } from "react";

const { Stepper } = defineStepper([
  { id: "profile", title: "Profile", description: "Tell us about you" },
  { id: "workspace", title: "Workspace", description: "Name your workspace" },
  { id: "billing", title: "Billing", description: "Add a payment method" },
  { id: "review", title: "Review", description: "Confirm and finish" },
]);

export function VerticalStepperBlock() {
  const [finished, setFinished] = useState(false);

  return (
    <Stepper.Root
      orientation="vertical"
      className="w-full max-w-2xl rounded-xl border bg-background p-6 shadow-sm"
    >
      {({ stepper }) => (
        <div className="flex flex-col gap-6 sm:flex-row sm:gap-8">
          {/* Sidebar rail — vertical step navigation */}
          <Stepper.List
            orientation="vertical"
            className="flex shrink-0 flex-col sm:w-48"
          >
            <Stepper.Items>
              {(step, index) => (
                <Stepper.Item
                  key={step.id}
                  step={step.id}
                  className="group/item relative pb-6 pl-9 last:pb-0"
                >
                  {index < stepper.count - 1 && (
                    <div className="absolute top-7 bottom-1 left-3.25 w-px bg-border group-data-[status=previous]/item:bg-primary" />
                  )}
                  <Stepper.Trigger className="flex items-start gap-3 text-left">
                    <Stepper.Indicator className="group absolute left-0 grid size-7 place-items-center rounded-full border bg-background text-xs font-semibold transition-colors data-[status=active]:border-primary data-[status=active]:bg-primary data-[status=active]:text-primary-foreground data-[status=previous]:border-primary data-[status=previous]:bg-primary data-[status=previous]:text-primary-foreground data-[status=upcoming]:border-border data-[status=upcoming]:text-muted-foreground">
                      <span className="group-data-[status=previous]:hidden">
                        {index + 1}
                      </span>
                      <Check className="hidden size-3.5 group-data-[status=previous]:block" />
                    </Stepper.Indicator>
                    <span>
                      <Stepper.Title className="block text-sm font-medium leading-none" />
                      <Stepper.Description className="mt-1 block text-xs text-muted-foreground" />
                    </span>
                  </Stepper.Trigger>
                </Stepper.Item>
              )}
            </Stepper.Items>
          </Stepper.List>

          {/* Long-form content panel */}
          <div className="min-w-0 flex-1">
            <p className="text-xs font-medium text-muted-foreground">
              Step {stepper.index + 1} of {stepper.count}
            </p>
            <h3 className="mt-1 text-lg font-semibold">
              {finished ? "Setup finished" : stepper.current.title}
            </h3>
            <p className="mt-1 text-sm text-muted-foreground">
              {finished
                ? "Profile, workspace, billing, and review are complete."
                : stepper.current.description}
            </p>

            <div className="mt-4 rounded-lg border bg-muted/30 p-4 text-sm text-muted-foreground">
              {finished
                ? "The completion state keeps the user oriented after the final action."
                : `Put the ${stepper.current.title.toLowerCase()} fields here. The rail stays fixed while this column scrolls independently on long forms.`}
            </div>

            <Stepper.Actions className="mt-6 flex gap-2">
              <Stepper.Prev className="inline-flex h-9 items-center rounded-lg border bg-background px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50">
                Back
              </Stepper.Prev>
							{finished ? (
								<button
									type="button"
									onClick={() => {
										setFinished(false);
										stepper.reset();
									}}
									className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
								>
									Restart flow
								</button>
							) : stepper.isLast ? (
								<button
									type="button"
									onClick={() => setFinished(true)}
                  className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                >
                  Finish setup
                </button>
              ) : (
                <Stepper.Next className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50">
                  Continue
                </Stepper.Next>
              )}
            </Stepper.Actions>
          </div>
        </div>
      )}
    </Stepper.Root>
  );
}