import { Steps, type StepItem } from "@/components/ui/expanded/Steps"

const stepItems: StepItem[] = Array.from({ length: 6 }, (_, index) => ({
  caption: "Caption",
  label: "Label",
  number: index + 1,
  slotContent: <div className="ds-step-slot">Slot content</div>,
  supportText: "Support",
}))

export function StepsDemo() {
  return (
    <div className="grid gap-8">
      <Steps items={stepItems} />
      <Steps direction="vertical" items={stepItems} />
    </div>
  )
}
