// Example: a lifecycle timeline with per-kind styles and custom detail bodies.
import {
  ArrowLeftRight,
  CheckCircle2,
  Radio,
  Sparkles,
  Zap,
} from "lucide-react"

import { LifecycleTimeline } from "@/components/widgets/lifecycle-timeline/LifecycleTimeline"
import type { LifecycleEventStyle } from "@/components/widgets/lifecycle-timeline/LifecycleTimeline.types"

const EVENT_STYLES: Record<string, LifecycleEventStyle> = {
  "signal.fired": {
    icon: Zap,
    label: "Signal fired",
    iconTone: "text-warning-500",
    chipTone: "bg-warning-500/15 text-warning-600 dark:text-warning-400",
  },
  "hypothesis.formed": {
    icon: Sparkles,
    label: "Hypothesis formed",
    iconTone: "text-info-500",
    chipTone: "bg-info-500/15 text-info-500",
  },
  "hypothesis.routed": {
    icon: Radio,
    label: "Routed",
    iconTone: "text-primary",
    chipTone: "bg-primary/15 text-primary",
  },
  "slot.transferred": {
    icon: ArrowLeftRight,
    label: "Transferred",
    iconTone: "text-warning-500",
    chipTone: "bg-warning-500/15 text-warning-600 dark:text-warning-400",
  },
  "decision.created": {
    icon: CheckCircle2,
    label: "Decision",
    iconTone: "text-success-500",
    chipTone: "bg-success-500/15 text-success-600 dark:text-success-400",
  },
}

export default function Example() {
  return (
    <div className="max-w-md rounded-md border border-border/60 bg-card px-3 py-2">
      <LifecycleTimeline
        eventStyles={EVENT_STYLES}
        events={[
          {
            at: "2026-06-09T11:56:40Z",
            kind: "signal.fired",
            detail: "coverage_rate · 3.2σ",
          },
          {
            at: "2026-06-09T13:04:51Z",
            kind: "hypothesis.formed",
            detail: "cagg 0.99 · suff 7.38",
          },
          {
            at: "2026-06-09T13:05:29Z",
            kind: "hypothesis.routed",
            detail: "admin · ops reviewer",
          },
          {
            at: "2026-06-16T12:48:35Z",
            kind: "decision.created",
            detail: "escalate",
          },
        ]}
        renderDetail={(e) =>
          e.detail ? (
            <span className="text-[11px] text-muted-foreground">
              {String(e.detail)}
            </span>
          ) : null
        }
      />
    </div>
  )
}