/**
 * Trouve-KA — table des erreurs de crawl récentes
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

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

interface RecentErrorsProps {
  errors: AdminOverview["recent_errors"];
}

export function RecentErrors({ errors }: RecentErrorsProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Erreurs récentes</CardTitle>
      </CardHeader>
      <CardContent>
        {errors.length === 0 ? (
          <p className="text-sm text-ink-2">
            Aucune erreur récente. Tout roule.
          </p>
        ) : (
          <table className="src-table">
            <caption className="sr-only">
              Erreurs de crawl récentes, avec l'URL, le code d'erreur et
              l'heure
            </caption>
            <thead>
              <tr>
                <th scope="col">URL</th>
                <th scope="col">Code d'erreur</th>
                <th scope="col" className="!text-right">
                  Heure
                </th>
              </tr>
            </thead>
            <tbody>
              {errors.map((error, index) => (
                <tr key={`${error.url}-${error.at}-${index}`}>
                  <td className="max-w-0 truncate text-ink">{error.url}</td>
                  <td className="gk-mono whitespace-nowrap text-xs font-bold text-danger">
                    {error.error_code}
                  </td>
                  <td className="gk-mono whitespace-nowrap text-right tabular-nums text-ink-2">
                    {formatTime(error.at)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </CardContent>
    </Card>
  );
}