import { Avatar } from "@/components/avatar";
import type { ProfileRow } from "./page";

export function EntryRanking({
  profiles,
  entryCounts,
}: {
  profiles: ProfileRow[];
  entryCounts: Record<string, number>;
}) {
  const sorted = [...profiles].sort((a, b) => {
    const diff = (entryCounts[b.id] ?? 0) - (entryCounts[a.id] ?? 0);
    return diff !== 0 ? diff : a.pseudo.localeCompare(b.pseudo);
  });

  return (
    <div className="marble-surface rounded-2xl border border-gold/40 p-4 shadow-lg">
      <p className="mb-2 text-center font-heading text-sm tracking-wide text-text-mut uppercase">
        Passages dans le char
      </p>
      <ul className="grid grid-cols-2 gap-x-4 gap-y-1.5 sm:grid-cols-3 lg:grid-cols-4">
        {sorted.map((p) => {
          const count = entryCounts[p.id] ?? 0;
          return (
            <li key={p.id} className="flex min-w-0 items-center gap-1.5 text-xs">
              <Avatar pseudo={p.pseudo} avatarUrl={p.avatar_url} size="xs" />
              <span className={`truncate ${count === 0 ? "text-text-mut/60" : "text-text-marble"}`}>{p.pseudo}</span>
              <span className="ml-auto shrink-0 font-heading text-sea">{count > 0 ? `×${count}` : "—"}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}