import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { ChartData } from '../../types';

interface PieChartProps {
    data: ChartData[];
    title?: string;
    colors?: string[];
}

const DEFAULT_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];

export const PieChart = ({ data, title, colors = DEFAULT_COLORS }: PieChartProps) => {
    return (
        <div className="card p-6">
            {title && (
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                    {title}
                </h3>
            )}
            <ResponsiveContainer width="100%" height={300}>
                <RechartsPieChart>
                    <Pie
                        data={data}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                    >
                        {data.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                        ))}
                    </Pie>
                    <Tooltip
                        contentStyle={{
                            backgroundColor: 'var(--tooltip-bg)',
                            border: 'none',
                            borderRadius: '8px',
                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                        }}
                        labelStyle={{ color: 'var(--tooltip-text)' }}
                    />
                </RechartsPieChart>
            </ResponsiveContainer>
        </div>
    );
};