Timeline

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TimelineItem {
  id: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  time: string;
  icon?: React.ReactNode;
  tone?: "default" | "success" | "warning" | "danger" | "info";
}

const toneCls = {
  default: "bg-muted text-muted-foreground",
  success: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
  warning: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
  danger: "bg-destructive/15 text-destructive",
  info: "bg-sky-500/15 text-sky-600 dark:text-sky-400",
};

/** A vertical activity timeline; items stagger in. */
export function Timeline({ items, className }: { items: TimelineItem[]; className?: string }) {
  return (
    <ol className={cn("relative", className)}>
      {items.map((item, i) => (
        <motion.li
          key={item.id}
          initial={{ opacity: 0, x: -6 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: i * 0.05, duration: 0.25 }}
          className="relative flex gap-3 pb-5 last:pb-0"
        >
          {i < items.length - 1 && <span className="absolute left-3.5 top-8 bottom-0 w-px bg-border" aria-hidden />}
          <span className={cn("relative z-10 grid size-7 shrink-0 place-items-center rounded-full ring-4 ring-background [&_svg]:size-3.5", toneCls[item.tone ?? "default"])}>
            {item.icon ?? <span className="size-1.5 rounded-full bg-current" />}
          </span>
          <div className="min-w-0 flex-1 pt-0.5">
            <div className="flex items-baseline justify-between gap-3">
              <p className="text-sm">{item.title}</p>
              <time className="shrink-0 text-xs text-muted-foreground">{item.time}</time>
            </div>
            {item.description && <div className="mt-1 text-sm text-muted-foreground">{item.description}</div>}
          </div>
        </motion.li>
      ))}
    </ol>
  );
}