Changelog Table

import { cn } from "@/lib/utils";

export interface ChangelogEntry {
  version: string;
  date: string;
  type: "new" | "improved" | "fixed";
  notes: string[];
}

export interface ChangelogTableProps {
  entries?: ChangelogEntry[];
  className?: string;
}

const DEFAULT_ENTRIES: ChangelogEntry[] = [
  { version: "4.2.0", date: "2026-09-22", type: "new", notes: ["Variable font axes in the type panel", "Password pages for single projects"] },
  { version: "4.1.3", date: "2026-09-10", type: "fixed", notes: ["Captions no longer wrap under images on Safari 19"] },
  { version: "4.1.0", date: "2026-08-28", type: "improved", notes: ["AVIF images are 18% smaller", "Editor loads twice as fast on large sites"] },
];

const TYPE = { new: "bg-da-accent text-da-accent-fg", improved: "border border-da-border-strong", fixed: "bg-da-surface-2 text-da-muted-fg" } as const;

/** Release log laid out as a table: mono version + ISO date column, a square type tag (New in signal color, Improved outlined, Fixed gray) and dash-listed notes; hairline rows. */
export function ChangelogTable({ entries = DEFAULT_ENTRIES, className }: ChangelogTableProps) {
  return (
    <div className={cn("relative overflow-x-auto", className)} role="region" aria-label="Changelog" tabIndex={0}>
      <table className="w-full min-w-[520px] text-[15px]">
        <caption className="pb-4 text-left font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">Changelog</caption>
        <thead className="sr-only">
          <tr>
            <th scope="col">Version</th>
            <th scope="col">Type</th>
            <th scope="col">Changes</th>
          </tr>
        </thead>
        <tbody className="border-t border-da-border-strong">
          {entries.map((e) => (
            <tr key={e.version} className="border-b border-da-border align-top">
              <th scope="row" className="w-40 py-5 pr-6 text-left font-normal">
                <span className="block font-da-mono">v{e.version}</span>
                <time dateTime={e.date} className="font-da-mono text-xs text-da-muted-fg">
                  {e.date}
                </time>
              </th>
              <td className="w-28 py-5 pr-6">
                <span className={cn("inline-block rounded-da-sm px-1.5 py-0.5 font-da-mono text-[11px] tracking-da-label uppercase", TYPE[e.type])}>
                  {e.type}
                </span>
              </td>
              <td className="py-5">
                <ul className="space-y-1">
                  {e.notes.map((n) => (
                    <li key={n} className="flex gap-2">
                      <span aria-hidden className="text-da-muted-fg">
                        –
                      </span>
                      {n}
                    </li>
                  ))}
                </ul>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ChangelogTable;