Event rail

import { useState, type ReactNode } from "react"
import { EventRail, type RailEvent } from "@/components/ui/event-rail"

function Panel({ title, context, className = "max-w-md", children }: { title: string; context: string; className?: string; children: ReactNode }) {
  return (
    <section className={`grid w-full gap-5 rounded-overlay border border-border bg-background p-6 shadow-resting max-sm:p-4 ${className}`}>
      <div className="grid gap-1">
        <p className="font-medium">{title}</p>
        <p className="text-sm text-muted-foreground">{context}</p>
      </div>
      {children}
    </section>
  );
}

const history: RailEvent[] = [
  { id: "founded", date: "March 2019", year: 2019, title: "Founded in Lisbon", description: "Three people, one desk and a payments idea." },
  { id: "seed", date: "November 2019", year: 2019, title: "Seed round", description: "Raised to build the first card issuing API." },
  { id: "launch", date: "June 2020", year: 2020, title: "Public launch", description: "Opened to every business in Portugal and Spain." },
  { id: "hundred", date: "April 2021", year: 2021, title: "100 customers" },
  { id: "europe", date: "January 2022", year: 2022, title: "Live across the EU", description: "Licensed in 27 countries." },
  { id: "series-a", date: "September 2023", year: 2023, title: "Series A", description: "Doubled the team to build treasury." },
  { id: "treasury", date: "May 2024", year: 2024, title: "Treasury ships" },
  { id: "today", date: "October 2026", year: 2026, title: "120 people, 9 offices", description: "Still answering support ourselves on Fridays." },
];

export function EventRailDemo() {
  const [event, setEvent] = useState("launch");
  return (
    <Panel title="Our story" context={`Showing ${history.find((item) => item.id === event)?.date}`} className="max-w-3xl">
      <EventRail label="Company history" events={history} value={event} onValueChange={setEvent} />
    </Panel>
  );
}