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

export function OpportunitiesCard({ ov }: { ov: KeywordOverview }) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-sm">Opportunités (quick-wins)</CardTitle>
        <Link
          href="/keywords/recherche"
          className="text-muted-foreground text-xs hover:text-foreground"
        >
          Voir tout →
        </Link>
      </CardHeader>
      <CardContent>
        {ov.opportunities.length === 0 ? (
          <p className="text-muted-foreground text-sm">
            Aucune opportunité quick-win (positions 11–20) pour l'instant.
          </p>
        ) : (
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-muted-foreground text-xs">
                <th className="pb-2 font-medium">Mot-clé</th>
                <th className="pb-2 text-right font-medium">Vol.</th>
                <th className="pb-2 text-right font-medium">Pos.</th>
                <th className="pb-2 text-right font-medium">KD</th>
                <th className="pb-2 text-right font-medium">Impr.</th>
              </tr>
            </thead>
            <tbody>
              {ov.opportunities.map((o) => (
                <tr key={o.id} className="border-border/50 border-t">
                  <td className="py-1.5 pr-2">{o.term}</td>
                  <td className="py-1.5 text-right tabular-nums">
                    {o.volume.toLocaleString("fr-FR")}
                  </td>
                  <td className="py-1.5 text-right tabular-nums">
                    {o.position.toFixed(1)}
                  </td>
                  <td className="py-1.5 text-right">
                    <KdBadge value={o.kd} />
                  </td>
                  <td className="py-1.5 text-right tabular-nums">
                    {o.impressions.toLocaleString("fr-FR")}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </CardContent>
    </Card>
  );
}