
import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

interface PaymentMethodData {
  method: string;
  amount: number;
  percentage: number;
}

interface PaymentMethodChartProps {
  data: PaymentMethodData[];
  isEmpty: boolean;
}

const COLORS = ['#9b87f5', '#6E59A5']; // 신용카드, 현금 색상

const PaymentMethodChart: React.FC<PaymentMethodChartProps> = ({ data, isEmpty }) => {
  if (isEmpty) {
    return (
      <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
        <p>데이터가 없습니다</p>
      </div>
    );
  }

  const chartData = data.map(item => ({
    name: item.method,
    value: item.amount
  }));

  return (
    <div className="neuro-card h-72 desktop-card">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 5 }}>
          <Pie
            data={chartData}
            cx="50%"
            cy="50%"
            innerRadius={50}
            outerRadius={80}
            paddingAngle={5}
            dataKey="value"
            labelLine={false}
            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
            fontSize={12}
          >
            {chartData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          {/* Legend 제거 */}
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

export default PaymentMethodChart;
