// src/components/keywords/overview/top-volume-card.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { KeywordOverview } from "@/lib/keywords/overview";

export function TopVolumeCard({ ov }: { ov: KeywordOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Top mots-clés par volume</CardTitle>
      </CardHeader>
      <CardContent>
        {ov.topByVolume.length === 0 ? (
          <p className="text-muted-foreground text-sm">Aucun mot-clé.</p>
        ) : (
          <ul className="space-y-1.5 text-sm">
            {ov.topByVolume.map((t) => (
              <li
                key={t.id}
                className="flex items-center justify-between gap-2"
              >
                <span className="truncate">{t.term}</span>
                <span className="shrink-0 text-muted-foreground tabular-nums">
                  {t.volume.toLocaleString("fr-FR")}
                  {t.position != null ? ` · pos ${t.position.toFixed(0)}` : ""}
                </span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}