import { Timeline, type TimelineStep } from "@/components/ui/expanded/Timeline"

const timelineSteps: TimelineStep[] = Array.from({ length: 6 }, (_, index) => ({
  caption: "Caption",
  date: "Mar 15. 2050",
  id: `timeline-demo-${index}`,
  label: "Label",
  state: "finished",
}))

export function TimelineDemo() {
  return (
    <div className="grid gap-8">
      <Timeline ariaLabel="Timeline" steps={timelineSteps} />
      <Timeline ariaLabel="Timeline" orientation="horizontal" steps={timelineSteps} />
    </div>
  )
}
