// src/components/keywords/overview/kd-histogram.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { KeywordOverview } from "@/lib/keywords/overview";
import { BarList } from "./bar-list";

export function KdHistogram({ ov }: { ov: KeywordOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Distribution KD</CardTitle>
      </CardHeader>
      <CardContent>
        <BarList
          items={ov.kdDistribution.map((b) => ({
            label: b.key,
            value: b.count,
          }))}
        />
      </CardContent>
    </Card>
  );
}