// src/components/backlink/overview/campaign-card.tsx
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { BacklinkOverview } from "@/lib/backlink/overview";
import type { BacklinkStatus } from "@/lib/db/domain-schema";

const STATUS_LABELS: { status: BacklinkStatus; label: string }[] = [
  { status: "prospect", label: "Prospect" },
  { status: "planned", label: "Planifié" },
  { status: "in_progress", label: "Outreach" },
  { status: "live", label: "Live" },
  { status: "lost", label: "Perdu" },
];

export function CampaignCard({ ov }: { ov: BacklinkOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">
          <Link href="/backlink/planning" className="hover:underline">
            Campagne du site
          </Link>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-2 text-sm">
        {STATUS_LABELS.map((s) => (
          <div key={s.status} className="flex items-center justify-between">
            <span>{s.label}</span>
            <span className="tabular-nums">
              {ov.campaign.counters[s.status]}
            </span>
          </div>
        ))}
        <p className="border-t pt-2 text-muted-foreground text-xs">
          {ov.campaign.cadence.thisMonth} lien(s) live ce mois ·{" "}
          {ov.campaign.cadence.lastMonth} le mois dernier
        </p>
      </CardContent>
    </Card>
  );
}