import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const COLORS = ['#0ea5e9', '#f59e0b', '#8b5cf6', '#22c55e', '#f97316'];
const TYPE_LABELS = {
  industrial: 'Промышленный', commercial: 'Коммерческий',
  infrastructure: 'Инфраструктура', residential: 'Частный', other: 'Другое',
};

const ObjectTypeChart = ({ data }) => (
  <div>
    <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '0.95rem', fontWeight: 700, marginBottom: '14px' }}>
      Типы объектов
    </h3>
    {data.length === 0 ? (
      <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', textAlign: 'center', padding: '40px 0' }}>Нет данных</p>
    ) : (
      <ResponsiveContainer width="100%" height={210}>
        <PieChart>
          <Pie data={data} dataKey="count" nameKey="type" cx="50%" cy="50%" innerRadius={50} outerRadius={80}>
            {data.map((entry, i) => <Cell key={entry.type} fill={COLORS[i % COLORS.length]} />)}
          </Pie>
          <Tooltip formatter={(v, name) => [v, TYPE_LABELS[name] || name]} />
          <Legend formatter={(v) => TYPE_LABELS[v] || v} iconSize={10} />
        </PieChart>
      </ResponsiveContainer>
    )}
  </div>
);

export default ObjectTypeChart;
