// src/components/backlink/overview/activity-card.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { BacklinkOverview } from "@/lib/backlink/overview";

const dateFmt = new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium" });

export function ActivityCard({ ov }: { ov: BacklinkOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Activité récente</CardTitle>
      </CardHeader>
      <CardContent>
        {ov.activity.length === 0 ? (
          <p className="text-muted-foreground text-sm">Aucune activité</p>
        ) : (
          <ul className="space-y-2 text-sm">
            {ov.activity.map((e) => (
              <li
                key={`${e.type}-${e.domainNorm}-${e.at}`}
                className="flex items-center justify-between gap-2"
              >
                <span className="truncate">
                  {e.platform}{" "}
                  <span className="text-muted-foreground">
                    — {e.type === "live" ? "passé live" : "prospect ajouté"}
                  </span>
                </span>
                <span className="shrink-0 text-muted-foreground text-xs">
                  {dateFmt.format(new Date(e.at))}
                </span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}