Timeline

"use client";
import { GitCommit, Rocket, Bug, Sparkles } from "lucide-react";

type State = "simple" | "detailed" | "live";

const EVENTS = [
{ icon: Sparkles, title: "Frontend Lab 上線", time: "2026-05-14", desc: "118 個前端 UI 模式" },
{ icon: Rocket, title: "Deploy 到 Cloudflare", time: "2026-05-13" },
{ icon: Bug, title: "修復 variant 切換 bug", time: "2026-05-12" },
{ icon: GitCommit, title: "初版 commit", time: "2026-05-10" },
];

export function Timeline({ state = "detailed" }: { state?: State }) {
const simple = state === "simple";

return (
  <ol className="relative w-full max-w-md space-y-4 border-l-2 border-border pl-6">
    {EVENTS.map((e, i) => {
      const isLive = state === "live" && i === 0;
      return (
        <li key={i} className="relative">
          <span
            className={`absolute -left-[31px] grid h-5 w-5 place-items-center rounded-full ${isLive ? "bg-lab-accent" : "bg-background border border-border"}`}
          >
            {isLive && (
              <span className="absolute inset-0 animate-ping rounded-full bg-lab-accent" />
            )}
            <e.icon
              className={`h-3 w-3 ${isLive ? "text-background" : "text-muted-foreground"}`}
            />
          </span>
          <p className="text-sm font-medium text-foreground">{e.title}</p>
          <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
            {e.time}
          </p>
          {!simple && e.desc && (
            <p
              className="mt-1 text-xs text-muted-foreground"
              style={{ fontFamily: "var(--font-zh)" }}
            >
              {e.desc}
            </p>
          )}
        </li>
      );
    })}
  </ol>
);
}