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

interface GaugeProps {
  value: number;
  color: string;
  label: string;
}

const Gauge: React.FC<GaugeProps> = ({ value, color, label }) => {
  const data = [{ value: value }, { value: 100 - value }];
  return (
    <div className="bg-white p-8 rounded-3xl border border-slate-100">
      <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-6">
        {label}
      </h4>
      <div className="w-full h-40 relative">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={data}
              startAngle={180}
              endAngle={0}
              innerRadius={55}
              outerRadius={75}
              paddingAngle={0}
              dataKey="value"
              stroke="none"
            >
              <Cell fill={color} />
              <Cell fill="#f1f5f9" />
            </Pie>
          </PieChart>
        </ResponsiveContainer>
        <div className="absolute inset-0 flex flex-col items-center justify-center pt-10">
          <span className="text-3xl font-black text-[#002147]">{value}%</span>
          <span className="text-[10px] font-bold text-slate-400 uppercase">
            Meta
          </span>
        </div>
      </div>
    </div>
  );
};

export default Gauge;