"use client";

import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
} from "recharts";
import { RadarChartData } from "@/lib/types";

interface SkillsRadarChartProps {
  data: RadarChartData[];
}

export function SkillsRadarChart({ data }: SkillsRadarChartProps) {
  // Transform data for the chart
  const chartData = data.map((item) => ({
    category: item.category,
    score: item.score,
    maxScore: item.maxScore,
  }));

  if (data.length === 0) {
    return (
      <div className="flex items-center justify-center h-[400px] text-muted-foreground">
        <p>Aucune donnée disponible</p>
      </div>
    );
  }

  return (
    <div className="w-full h-[400px]">
      <ResponsiveContainer width="100%" height="100%">
        <RadarChart
          data={chartData}
          margin={{ top: 20, right: 30, bottom: 20, left: 30 }}
        >
          <PolarGrid gridType="polygon" />
          <PolarAngleAxis
            dataKey="category"
            tick={{ fontSize: 12, fill: "hsl(var(--foreground))" }}
            className="text-xs"
          />
          <PolarRadiusAxis
            angle={90}
            domain={[0, 3]}
            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
            tickCount={4}
          />
          <Radar
            name="Niveau"
            dataKey="score"
            stroke="hsl(var(--primary))"
            fill="hsl(var(--primary))"
            fillOpacity={0.2}
            strokeWidth={2}
          />
        </RadarChart>
      </ResponsiveContainer>
    </div>
  );
}