import { PieChart as RechartsPieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { CardTitle } from '../ui/Typography';

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

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

export const PieChart = ({ data, title, colors = DEFAULT_COLORS }: PieChartProps) => {
    // Custom legend component for better mobile experience
    const CustomLegend = (props: any) => {
        const { payload } = props;
        return (
            <div className="flex flex-wrap justify-center gap-2 mt-3">
                {payload.map((entry: any, index: number) => (
                    <div key={index} className="flex items-center gap-1 text-xs sm:text-sm">
                        <div
                            className="w-3 h-3 rounded-full flex-shrink-0"
                            style={{ backgroundColor: entry.color }}
                        />
                        <span className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
                            {entry.value}: {entry.payload.value}
                        </span>
                    </div>
                ))}
            </div>
        );
    };

    return (
        <div className="card p-3 sm:p-4 lg:p-6">
            {title && (
                <CardTitle className="mb-3 sm:mb-4 text-center">
                    {title}
                </CardTitle>
            )}
            <div className="w-full">
                <ResponsiveContainer width="100%" height={280} minHeight={220}>
                    <RechartsPieChart>
                        <Pie
                            data={data}
                            cx="50%"
                            cy="45%"
                            labelLine={false}
                            // Remove the overlapping labels
                            label={false}
                            outerRadius="65%"
                            fill="#8884d8"
                            dataKey="value"
                        >
                            {data.map((_, index) => (
                                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                            ))}
                        </Pie>
                        <Tooltip
                            contentStyle={{
                                backgroundColor: 'var(--toast-bg)',
                                color: 'var(--toast-color)',
                                border: 'none',
                                borderRadius: '8px',
                                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                                fontSize: '14px',
                            }}
                            formatter={(value, name) => [`${value}`, name]}
                        />
                        <Legend
                            content={<CustomLegend />}
                            wrapperStyle={{
                                paddingTop: '10px'
                            }}
                        />
                    </RechartsPieChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}; 