src/components/charts/sentiment-chart.tsx

"use client";

import { Pie, PieChart, ResponsiveContainer } from "recharts";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
} from "@/components/ui/chart";

const chartData = [
  { sentiment: "Positive", value: 45, fill: "hsl(var(--chart-2))" },
  { sentiment: "Negative", value: 15, fill: "hsl(var(--chart-5))" },
  { sentiment: "Neutral", value: 40, fill: "hsl(var(--muted-foreground))" },
];

const chartConfig = {
  value: {
    label: "Percentage",
  },
  positive: {
    label: "Positive",
    color: "hsl(var(--chart-2))",
  },
  negative: {
    label: "Negative",
    color: "hsl(var(--chart-5))",
  },
  neutral: {
    label: "Neutral",
    color: "hsl(var(--muted-foreground))",
  },
};

export function SentimentChart() {
  return (
    <ChartContainer
      config={chartConfig}
      className="mx-auto aspect-square max-h-[250px]"
    >
      <ResponsiveContainer>
        <PieChart>
          <ChartTooltip
            cursor={false}
            content={<ChartTooltipContent hideLabel />}
          />
          <Pie
            data={chartData}
            dataKey="value"
            nameKey="sentiment"
            innerRadius={60}
            strokeWidth={5}
            aria-label="Sentiment distribution pie chart"
          />
          <ChartLegend
            content={<ChartLegendContent nameKey="sentiment" />}
            className="-translate-y-[2rem] flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
          />
        </PieChart>
      </ResponsiveContainer>
    </ChartContainer>
  );
}