import Link from "next/link";
import type { ComponentType } from "react";
import { Avatar } from "@/components/avatar";
import { IconHorn, IconWings } from "@/components/icons";

export type GameLeader = { pseudo: string; avatarUrl: string | null; score: number } | null;

function LeaderCard({
  href,
  label,
  icon: Icon,
  leader,
}: {
  href: string;
  label: string;
  icon: ComponentType<{ className?: string }>;
  leader: GameLeader;
}) {
  return (
    <Link
      href={href}
      className="marble-surface flex items-center gap-3 rounded-xl border border-gold/25 p-3 shadow-sm transition hover:border-gold/50 hover:shadow-md"
    >
      <Icon className="h-5 w-5 shrink-0 text-gold" />
      <div className="min-w-0 flex-1">
        <p className="text-[0.65rem] font-medium tracking-wide text-text-mut uppercase">{label}</p>
        {leader ? (
          <div className="mt-1 flex items-center gap-2">
            <Avatar pseudo={leader.pseudo} avatarUrl={leader.avatarUrl} size="xs" />
            <span className="truncate text-sm font-medium text-text-marble">{leader.pseudo}</span>
          </div>
        ) : (
          <p className="mt-1 truncate text-sm text-text-mut">Personne n&apos;a encore joué</p>
        )}
      </div>
      {leader && <span className="shrink-0 font-heading text-sm font-bold text-sea">{leader.score}</span>}
    </Link>
  );
}

// Comme les podiums (voir leaderboard/icare/corne) : un meneur à 0 n'est pas
// un vrai champion, juste un score par défaut — rien à afficher tant que
// personne n'a vraiment marqué (leader passé à null par la page).
export function GameHighlights({
  icarusLeader,
  melonLeader,
}: {
  icarusLeader: GameLeader;
  melonLeader: GameLeader;
}) {
  return (
    <div className="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
      <LeaderCard href="/icare" label="Le Vol d'Icare" icon={IconWings} leader={icarusLeader} />
      <LeaderCard href="/corne" label="La Corne d'Abondance" icon={IconHorn} leader={melonLeader} />
    </div>
  );
}