// src/components/keywords/overview/backlinks-card.tsx
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { KeywordOverview } from "@/lib/keywords/overview";

const STATUS_LABEL: Record<string, string> = {
  prospect: "Prospects",
  planned: "Planifiés",
  in_progress: "Outreach",
  live: "Obtenus",
  lost: "Perdus",
};

export function BacklinksCard({ ov }: { ov: KeywordOverview }) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-sm">Backlinks (reservoir)</CardTitle>
        <Link
          href="/backlink/reservoir"
          className="text-muted-foreground text-xs hover:text-foreground"
        >
          Voir →
        </Link>
      </CardHeader>
      <CardContent>
        {!ov.backlinks ? (
          <p className="text-muted-foreground text-sm">Aucune source.</p>
        ) : (
          <div className="space-y-2">
            <div className="font-semibold text-2xl tabular-nums">
              {ov.backlinks.total.toLocaleString("fr-FR")}
              <span className="ml-1 font-normal text-muted-foreground text-sm">
                sources
              </span>
            </div>
            <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
              {ov.backlinks.byStatus.map((s) => (
                <span key={s.key} className="text-muted-foreground">
                  {STATUS_LABEL[s.key] ?? s.key}{" "}
                  <span className="text-foreground tabular-nums">
                    {s.count}
                  </span>
                </span>
              ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}