// Gauge Chart Component (Recharts wrapper)
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

interface GaugeChartProps {
  value: number; // 0-100
  target?: number;
  height?: number;
  color?: string;
}

export default function GaugeChart({ value, target, height = 200, color = '#2563eb' }: GaugeChartProps) {
  const data = [
    { name: 'Value', value },
    { name: 'Remaining', value: 100 - value },
  ];

  const COLORS = [color, '#e2e8f0'];

  return (
    <div style={{ position: 'relative', width: '100%', height }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            startAngle={180}
            endAngle={0}
            innerRadius={60}
            outerRadius={80}
            paddingAngle={0}
            dataKey="value"
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
        }}
      >
        <div style={{ fontSize: '2rem', fontWeight: 700, color: color }}>
          {value.toFixed(1)}%
        </div>
        {target && (
          <div style={{ fontSize: '0.875rem', color: '#64748b' }}>
            Target: {target}%
          </div>
        )}
      </div>
    </div>
  );
}

