Leaderboard Table

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

export interface LeaderboardEntry {
  name: string;
  detail?: string;
  value: number;
  /** Position change since last period (+ up, − down). */
  change?: number;
}

export interface LeaderboardTableProps {
  title: string;
  valueLabel?: string;
  entries: LeaderboardEntry[];
  format?: (value: number) => string;
  className?: string;
}

const PODIUM = ["bg-da-primary text-da-primary-fg", "bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg"];

export function LeaderboardTable({ title, valueLabel = "Score", entries, format = (v) => v.toLocaleString("en-US"), className }: LeaderboardTableProps) {
  const sorted = [...entries].sort((a, b) => b.value - a.value);
  const max = sorted[0]?.value ?? 1;

  return (
    <div className={cn("da-stroke bg-da-surface text-da-surface-fg shadow-da-md", className)}>
      <div className="da-stroke-b flex items-center justify-between bg-da-fg px-4 py-3 text-da-bg">
        <h3 className="font-da-display text-lg tracking-da-display uppercase">{title}</h3>
        <span className="font-da-mono text-[11px] font-bold tracking-da-label uppercase">{valueLabel}</span>
      </div>
      <ol>
        {sorted.map((e, i) => (
          <li key={e.name} className={cn("relative flex items-center gap-4 px-4 py-3", i > 0 && "da-stroke-t")}>
            <span aria-hidden className="absolute inset-y-0 left-0 bg-da-muted" style={{ width: `${(e.value / max) * 100}%` }} />
            <span className={cn("da-stroke relative grid size-9 shrink-0 place-items-center font-da-display", PODIUM[i] ?? "bg-da-surface")}>
              {i + 1}
              <span className="sr-only">. place</span>
            </span>
            <span className="relative min-w-0 flex-1">
              <span className="block truncate font-bold">{e.name}</span>
              {e.detail && <span className="block truncate font-da-mono text-xs text-da-muted-fg">{e.detail}</span>}
            </span>
            {e.change !== undefined && e.change !== 0 && (
              <span className={cn("da-stroke relative px-1 font-da-mono text-[11px] font-bold", e.change > 0 ? "bg-da-success text-da-success-fg" : "bg-da-danger text-da-danger-fg")}>
                {e.change > 0 ? `▲${e.change}` : `▼${Math.abs(e.change)}`}
                <span className="sr-only">{e.change > 0 ? " places up" : " places down"}</span>
              </span>
            )}
            <span className="relative font-da-display text-xl tabular-nums">{format(e.value)}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

export default LeaderboardTable;