"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "../lib/utils";
import { staggerDelay, transitions } from "../lib/motion";

export interface TimelineItem {
  id: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  time?: React.ReactNode;
  icon?: React.ReactNode;
  tone?: "default" | "positive" | "attention" | "risk" | "info";
}

const DOT = {
  default: "bg-muted-foreground/40",
  positive: "bg-positive",
  attention: "bg-attention",
  risk: "bg-risk",
  info: "bg-action",
} as const;

/** An activity feed: who did what, when, newest first. */
export function Timeline({ items, className }: { items: TimelineItem[]; className?: string }) {
  return (
    <ol className={cn("relative flex flex-col", className)}>
      {items.map((item, index) => (
        <motion.li
          key={item.id}
          initial={{ opacity: 0, x: -4 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ ...transitions.enter, delay: staggerDelay(index) }}
          className="relative flex gap-3 pb-5 last:pb-0"
        >
          {index < items.length - 1 ? (
            <span aria-hidden="true" className="absolute top-6 bottom-0 left-[11px] w-px bg-border" />
          ) : null}
          <span className="relative flex size-6 shrink-0 items-center justify-center">
            {item.icon ? (
              <span className="flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-3.5">
                {item.icon}
              </span>
            ) : (
              <span className={cn("size-2 rounded-full ring-4 ring-background", DOT[item.tone ?? "default"])} />
            )}
          </span>
          <div className="min-w-0 flex-1 pt-0.5">
            <div className="flex items-baseline justify-between gap-3">
              <p className="min-w-0 text-sm text-foreground">{item.title}</p>
              {item.time ? <span className="shrink-0 text-xs text-muted-foreground tabular-nums">{item.time}</span> : null}
            </div>
            {item.description ? <div className="mt-0.5 text-sm text-muted-foreground">{item.description}</div> : null}
          </div>
        </motion.li>
      ))}
    </ol>
  );
}