Stepper

import {
  Stepper,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper";

const steps = [
  {
    step: 1,
    title: "Step One",
  },
  {
    step: 2,
    title: "Step Two", 
  },
  {
    step: 3,
    title: "Step Three",
  },
];

function Component() {
  return (
    <div className="space-y-8 text-center min-w-[500px]">
      <Stepper defaultValue={2}>
        {steps.map(({ step, title }) => (
          <StepperItem
            key={step}
            step={step}
            className="max-md:items-start [&:not(:last-child)]:flex-1"
          >
            <StepperTrigger className="max-md:flex-col">
              <StepperIndicator />
              <div className="text-center md:text-left">
                <StepperTitle>{title}</StepperTitle>
              </div>
            </StepperTrigger>
            {step < steps.length && <StepperSeparator className="max-md:mt-3.5 md:mx-4" />}
          </StepperItem>
        ))}
      </Stepper>
      <p className="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
        Stepper with inline titles
      </p>
    </div>
  );
}

export { Component };