import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';

const COLORS = ['#f59e0b', '#0ea5e9', '#8b5cf6', '#f97316'];

const AvgTimeChart = ({ data }) => (
  <div>
    <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '0.95rem', fontWeight: 700, marginBottom: '14px' }}>
      Среднее время в стадии (дни)
    </h3>
    {data.every((d) => d.avgDays === 0) ? (
      <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', textAlign: 'center', padding: '40px 0' }}>
        Недостаточно данных
      </p>
    ) : (
      <ResponsiveContainer width="100%" height={210}>
        <BarChart data={data} margin={{ left: 10, right: 20 }}>
          <XAxis dataKey="status" tick={{ fontSize: 11, fill: '#94a3b8' }} />
          <YAxis tick={{ fontSize: 11, fill: '#94a3b8' }} unit=" д" />
          <Tooltip formatter={(v) => [`${v} дней`]} />
          <Bar dataKey="avgDays" radius={[4, 4, 0, 0]}>
            {data.map((entry, i) => <Cell key={entry.status} fill={COLORS[i % COLORS.length]} />)}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    )}
  </div>
);

export default AvgTimeChart;
