import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
} from "recharts";

const SkillRadarChart = ({ data }: { data: any[] }) => (
  // Updated: Transparent background
  <div className="w-full h-full flex items-center justify-center">
    <ResponsiveContainer width="100%" height="100%">
      <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
        {/* Grid lines: lighter for dark theme */}
        <PolarGrid stroke="#e5e7eb" strokeOpacity={0.2} />

        {/* Labels: White text */}
        <PolarAngleAxis
          dataKey="skill"
          tick={{ fill: "#ffffff", fontSize: 12, fontWeight: 500 }}
        />

        {/* Radius Axis: Hidden or subtle */}
        <PolarRadiusAxis
          angle={30}
          domain={[0, 100]}
          tick={false}
          axisLine={false}
        />

        {/* The Radar Shape: Highlight Yellow with opacity */}
        <Radar
          name="Skill Level"
          dataKey="value"
          stroke="#F7E396"
          strokeWidth={2}
          fill="#F7E396"
          fillOpacity={0.4}
        />
      </RadarChart>
    </ResponsiveContainer>
  </div>
);

export default SkillRadarChart;