Release Card

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

export type ReleaseCardChangeKind = "new" | "improved" | "fixed" | "breaking";

export interface ReleaseCardProps {
  version: string;
  date: string;
  title: string;
  summary?: string;
  changes?: { kind: ReleaseCardChangeKind; text: string }[];
  href?: string;
  className?: string;
}

const KIND: Record<ReleaseCardChangeKind, string> = {
  new: "bg-da-success text-da-success-fg",
  improved: "bg-da-secondary text-da-secondary-fg",
  fixed: "bg-da-accent text-da-accent-fg",
  breaking: "bg-da-danger text-da-danger-fg",
};

export function ReleaseCard({ version, date, title, summary, changes = [], href, className }: ReleaseCardProps) {
  return (
    <article className={cn("da-stroke grid bg-da-surface text-da-surface-fg shadow-da-md sm:grid-cols-[9rem_1fr]", className)}>
      <header className="da-stroke-b flex items-center justify-between gap-2 bg-da-primary p-4 text-da-primary-fg sm:da-stroke-r sm:flex-col sm:items-start sm:justify-start sm:border-b-0">
        <p className="font-da-display text-2xl tracking-da-display">{version}</p>
        <time className="font-da-mono text-xs font-bold uppercase">{date}</time>
      </header>
      <div className="p-5">
        <h3 className="font-da-display text-xl leading-tight tracking-da-display uppercase">
          {href ? (
            <a href={href} className="da-focus underline decoration-transparent decoration-[3px] underline-offset-4 hover:decoration-current">
              {title}
            </a>
          ) : (
            title
          )}
        </h3>
        {summary && <p className="mt-2 text-da-muted-fg">{summary}</p>}
        {changes.length > 0 && (
          <ul className="mt-4 space-y-2">
            {changes.map((c) => (
              <li key={c.text} className="flex items-start gap-3 text-sm font-medium">
                <span className={cn("da-stroke w-20 shrink-0 py-0.5 text-center font-da-mono text-[10px] font-bold tracking-da-label uppercase", KIND[c.kind])}>{c.kind}</span>
                {c.text}
              </li>
            ))}
          </ul>
        )}
      </div>
    </article>
  );
}

export default ReleaseCard;