// src/components/content/online/online-kpis.tsx
import { StatCard } from "@/components/keywords/overview/stat-card";
import type { OnlineStats } from "@/lib/content/online";

export function OnlineKpis({ stats }: { stats: OnlineStats }) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      <StatCard
        label="Publiés"
        value={stats.published.toLocaleString("fr-FR")}
      />
      <StatCard
        label="Clics totaux"
        value={stats.totalClicks.toLocaleString("fr-FR")}
      />
      <StatCard
        label="Impressions"
        value={stats.totalImpressions.toLocaleString("fr-FR")}
      />
      <StatCard
        label="Position moyenne"
        value={stats.avgPosition?.toFixed(1) ?? "—"}
      />
    </div>
  );
}