"use client";

import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {
  PolarAngleAxis,
  PolarGrid,
  Radar,
  RadarChart,
  ResponsiveContainer,
  Tooltip,
} from "recharts";

type RadarDataPoint = {
  module: string;
  score: number;
};

type RadarChartCardProps = {
  data: RadarDataPoint[];
};

export function RadarChartCard({ data }: RadarChartCardProps) {
  return (
    <Card>
      <CardHeader>
        <h3 className="text-base font-semibold text-[#22314b]">Mapa Radar por Modulo</h3>
      </CardHeader>
      <CardContent>
        <div className="h-72 w-full">
          <ResponsiveContainer>
            <RadarChart data={data}>
              <PolarGrid stroke="#dde5f2" />
              <PolarAngleAxis dataKey="module" tick={{ fontSize: 12, fill: "#5f6b84" }} />
              <Radar dataKey="score" stroke="#0f2a5f" fill="#2451a8" fillOpacity={0.25} />
              <Tooltip />
            </RadarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}
