Meridian Rail

"use client"

import * as React from "react"
// Relative import on purpose: the 21st CLI rewrites it to the published path (`@/components/ui/<slug>`)
// and to a temporary path during `21st render`. An absolute "@/…" import breaks the render build.
import { MeridianRail, type ZoneSpec } from "@/components/ui/meridian-rail"

// A real distributed release crew. Priya works India-evening on purpose — that shifted row is the only
// reason an hour exists that suits all five, which is exactly the argument the rail is here to make.
const TEAM: ZoneSpec[] = [
  {
    timeZone: "Asia/Kolkata",
    label: "Bengaluru",
    person: "Priya Raman",
    workStart: 12,
    workEnd: 20,
  },
  { timeZone: "Europe/Berlin", label: "Berlin", person: "Jonas Weber" },
  { timeZone: "Europe/London", label: "London", person: "Ada Nwosu" },
  { timeZone: "America/Sao_Paulo", label: "São Paulo", person: "Marta Silva" },
  {
    timeZone: "America/New_York",
    label: "New York",
    person: "Chris Boone",
    workStart: 8,
    workEnd: 16,
  },
]

// Module-level `settings` + a default export that accepts them as props gives this demo a live controls
// panel on 21st.dev. Signature knobs first, then look, then copy.
const settings = {
  // The axis of the rail. Type any IANA zone and the whole staircase re-shuffles around it.
  yourZone: "Europe/Berlin",
  // Noon: a place a scheduler would honestly open on, three of five awake, and 210 minutes short of
  // the shared window so the recorded click on the best-window button has somewhere to travel.
  meridianAt: 720,
  spanHours: 24,
  workStart: 9,
  workEnd: 17,
  hour12: false,
  showOverlap: true,
  // Off for the cover: a third vertical at an unpredictable position is one line too many in a still.
  showNow: false,
  rowHeight: 48,
  eyebrow: "Scheduling",
  headline: "Find the hour everyone is awake.",
  subline: "Five people, five zones, one day. Drag the meridian and every clock moves with it.",
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  // Controlled on purpose: it is the API most consumers need, and it lets the knob move the meridian.
  const [minutes, setMinutes] = React.useState(s.meridianAt)
  React.useEffect(() => setMinutes(s.meridianAt), [s.meridianAt])

  return (
    <div className="bg-background flex min-h-[max(560px,100svh)] w-full flex-col items-center justify-center px-5 py-16 sm:px-8">
      <div className="flex w-full max-w-4xl flex-col items-center">
        <p className="text-muted-foreground border-border mb-5 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium">
          <span aria-hidden="true" className="bg-primary size-1.5 rounded-full" />
          {s.eyebrow}
        </p>
        <h1 className="text-foreground text-center text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          {s.headline}
        </h1>
        <p className="text-muted-foreground mt-4 max-w-xl text-center text-sm text-pretty sm:text-base">
          {s.subline}
        </p>

        <div className="mt-10 w-full">
          <MeridianRail
            zones={TEAM}
            baseZone={s.yourZone}
            value={minutes}
            onValueChange={setMinutes}
            spanHours={s.spanHours}
            workStart={s.workStart}
            workEnd={s.workEnd}
            hour12={s.hour12}
            showOverlap={s.showOverlap}
            showNow={s.showNow}
            rowHeight={s.rowHeight}
          />
        </div>
      </div>
    </div>
  )
}