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

export function OverviewKpis({ ov }: { ov: KeywordOverview }) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
      <StatCard
        label="Mots-clés"
        value={ov.totalKeywords.toLocaleString("fr-FR")}
      />
      <StatCard
        label="Positionnés"
        value={ov.positioned.toLocaleString("fr-FR")}
        sub={`${ov.positionedPct}%`}
      />
      <StatCard
        label="Quick-wins"
        value={ov.quickWins.toLocaleString("fr-FR")}
        sub="pos. 11–20"
      />
      <StatCard
        label="Volume cumulé"
        value={ov.totalVolume.toLocaleString("fr-FR")}
      />
      <StatCard
        label="Clics GSC"
        value={ov.totalClicks.toLocaleString("fr-FR")}
        sub="28 jours"
      />
      <StatCard label="KD moyen" value={ov.avgKd ?? "—"} />
    </div>
  );
}