/**
 * Trouve-KA — table des domaines les plus indexés
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatNumber } from "@/lib/format";
import type { AdminOverview } from "@/lib/types";

interface TopDomainsProps {
  domains: AdminOverview["top_domains"];
}

export function TopDomains({ domains }: TopDomainsProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Domaines les plus actifs</CardTitle>
      </CardHeader>
      <CardContent>
        {domains.length === 0 ? (
          <p className="text-sm text-ink-2">Aucun domaine pour l'instant.</p>
        ) : (
          <table className="src-table">
            <caption className="sr-only">
              Domaines les plus actifs, avec le nombre de pages indexées et le
              score Québec
            </caption>
            <thead>
              <tr>
                <th scope="col">Domaine</th>
                <th scope="col" className="!text-right">
                  Pages
                </th>
                <th scope="col" className="!text-right">
                  Score Québec
                </th>
              </tr>
            </thead>
            <tbody>
              {domains.map((domain) => (
                <tr key={domain.domain}>
                  <td className="max-w-0 truncate text-ink">
                    {domain.domain}
                  </td>
                  <td className="gk-mono text-right tabular-nums text-ink-2">
                    {formatNumber(domain.pages)}
                  </td>
                  <td className="gk-mono text-right tabular-nums text-ink-2">
                    {domain.quebec_score.toFixed(2)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </CardContent>
    </Card>
  );
}