Timeline

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

type TimelineProps = React.ComponentProps<"ol">;

/** A vertical list of dated events on one hairline. */
export function Timeline({ className, ...props }: TimelineProps) {
  return <ol className={cn("m-0 flex list-none flex-col p-0", className)} {...props} />;
}

type TimelineItemProps = Omit<React.ComponentProps<"li">, "title"> & {
  /** What happened, one line. */
  title: React.ReactNode;
  /** A machine-readable date, for example 2026-10-29. */
  dateTime: string;
  /** The date as people read it, for example "29 Oct". */
  date: string;
  /** One quiet line of detail. */
  description?: string;
};

export function TimelineItem({ title, dateTime, date, description, className, ...props }: TimelineItemProps) {
  return (
    <li
      className={cn(
        "relative grid grid-cols-[1rem_1fr] gap-x-3 pb-5 last:pb-0",
        "before:absolute before:top-3 before:bottom-0 before:left-[calc(0.5rem-0.5px)] before:w-px before:bg-border last:before:hidden",
        className,
      )}
      {...props}
    >
      <span
        aria-hidden="true"
        className="mt-1.5 size-2 place-self-start justify-self-center rounded-full border-2 border-foreground bg-background"
      />
      <div className="flex min-w-0 flex-col gap-0.5">
        <p className="m-0 text-sm text-foreground">{title}</p>
        <time dateTime={dateTime} className="font-mono text-xs text-muted-foreground">
          {date}
        </time>
        {description && <p className="m-0 mt-1 text-sm text-muted-foreground">{description}</p>}
      </div>
    </li>
  );
}