import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { cn } from "@/lib/utils";

interface SpendingCategory {
  name: string;
  value: number;
  color: string;
}

interface SpendingAnalyticsProps {
  data: SpendingCategory[];
  currency?: string;
}

const SpendingAnalytics = ({ 
  data,
  currency = "$"
}: SpendingAnalyticsProps) => {
  const totalSpending = data.reduce((sum, item) => sum + item.value, 0);
  
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      currencyDisplay: 'symbol',
    }).format(amount).replace('$', '');
  };
  
  return (
    <div className="animate-slide-up py-2">
      <h2 className="text-lg font-medium mb-4">Spending by Category</h2>
      
      <div className="flex">
        <div className="w-1/2 h-48">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={48}
                outerRadius={68}
                paddingAngle={2}
                dataKey="value"
                stroke="none"
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
        </div>
        
        <div className="w-1/2 space-y-2 my-auto">
          {data.map((category, index) => (
            <div key={index} className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <div 
                  className="w-3 h-3 rounded-full" 
                  style={{ backgroundColor: category.color }}
                />
                <span className="text-sm">{category.name}</span>
              </div>
              <div className="flex flex-col items-end">
                <span className="text-sm font-medium">
                  {currency}{formatCurrency(category.value)}
                </span>
                <span className="text-xs text-muted-foreground">
                  {Math.round((category.value / totalSpending) * 100)}%
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default SpendingAnalytics;