import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import type { StanceStats } from '../../utils/analysis.utils.ts';

type StanceDistributionChartProps = {
  stats: StanceStats;
};

const COLORS = {
  PRO: '#10b981', // green-500
  CON: '#ef4444', // red-500
};

const StanceDistributionChart = ({ stats }: StanceDistributionChartProps) => {
  const data = [
    { name: 'PRO', value: stats.pro, percentage: stats.proPercentage },
    { name: 'CON', value: stats.con, percentage: stats.conPercentage },
  ];

  return (
    <div className="h-64 w-full">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            labelLine={false}
            label={({ name, percentage }) => `${name}: ${percentage.toFixed(1)}%`}
            outerRadius={80}
            fill="#8884d8"
            dataKey="value"
          >
            {data.map((entry, index) => (
              <Cell
                key={`cell-${index}`}
                fill={entry.name === 'PRO' ? COLORS.PRO : COLORS.CON}
              />
            ))}
          </Pie>
          <Tooltip
            formatter={(value: number, name: string, props: any) => [
              `${value} (${props.payload.percentage.toFixed(1)}%)`,
              name,
            ]}
          />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

export default StanceDistributionChart;