// src/components/content/overview/content-status-distribution.tsx
import { BarList } from "@/components/keywords/overview/bar-list";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { ContentOverview } from "@/lib/content/overview";
import { CONTENT_STATUS_LABEL } from "@/lib/content/types";

export function ContentStatusDistribution({ ov }: { ov: ContentOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Pipeline</CardTitle>
      </CardHeader>
      <CardContent>
        <BarList
          items={ov.byStatus.map((b) => ({
            label: CONTENT_STATUS_LABEL[b.key],
            value: b.count,
          }))}
        />
      </CardContent>
    </Card>
  );
}