// src/components/keywords/overview/breakdown-card.tsx
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { KeywordOverview } from "@/lib/keywords/overview";
import { useThemeLabels } from "@/lib/keywords/theme-context";
import type { KeywordTheme } from "@/lib/keywords/types";
import { BarList } from "./bar-list";

const INTENT_LABEL: Record<string, string> = {
  informational: "Informationnel",
  commercial: "Commercial",
  transactional: "Transactionnel",
  navigational: "Navigationnel",
  local: "Local",
};

export function BreakdownCard({ ov }: { ov: KeywordOverview }) {
  const { labelOf } = useThemeLabels();
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Répartition</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <div className="mb-2 text-muted-foreground text-xs uppercase">
            Intent
          </div>
          <BarList
            items={ov.byIntent.map((i) => ({
              label: INTENT_LABEL[i.key] ?? i.key,
              value: i.count,
            }))}
          />
        </div>
        <div>
          <div className="mb-2 text-muted-foreground text-xs uppercase">
            Thème
          </div>
          <BarList
            items={ov.byTheme.map((t) => ({
              label:
                t.key === "—" ? "Sans thème" : labelOf(t.key as KeywordTheme),
              value: t.count,
            }))}
          />
        </div>
      </CardContent>
    </Card>
  );
}