// src/components/backlink/overview/opportunities-card.tsx
import Link from "next/link";
import { DrBadge } from "@/components/backlink/dr-badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { BacklinkOverview } from "@/lib/backlink/overview";

export function OpportunitiesCard({ ov }: { ov: BacklinkOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">
          <Link href="/backlink/recherche" className="hover:underline">
            Top opportunités
          </Link>
        </CardTitle>
      </CardHeader>
      <CardContent>
        {ov.opportunities.length === 0 ? (
          <p className="text-muted-foreground text-sm">
            Tout le réservoir est déjà prospecté 🎉
          </p>
        ) : (
          <ul className="space-y-2">
            {ov.opportunities.map((o) => (
              <li
                key={o.id}
                className="flex items-center justify-between gap-2 text-sm"
              >
                <div className="min-w-0">
                  <p className="truncate font-medium">{o.platform}</p>
                  <p className="truncate text-muted-foreground text-xs">
                    {o.domainNorm}
                  </p>
                </div>
                <div className="flex shrink-0 items-center gap-2">
                  <DrBadge value={o.dr ?? o.da} />
                  <span className="text-muted-foreground text-xs tabular-nums">
                    {o.score.toFixed(0)}
                  </span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}