'use client';

import {
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
  ResponsiveContainer,
  Tooltip,
} from 'recharts';
import type { DomainScore } from '../types';
import { translateDomain } from '../i18n/contentTranslations';

interface DomainRadarProps {
  domains: DomainScore[];
  locale?: string;
}

export default function DomainRadar({ domains, locale = 'en' }: DomainRadarProps) {
  if (domains.length === 0) {
    return (
      <div className="flex items-center justify-center h-64 text-gray-400">
        No domain data
      </div>
    );
  }

  const data = domains.map(d => ({
    domain: translateDomain(d.label, locale),
    score: d.score,
    fullMark: 100,
  }));

  return (
    <ResponsiveContainer width="100%" height={300}>
      <RadarChart data={data} cx="50%" cy="50%" outerRadius="75%">
        <PolarGrid stroke="#e5e7eb" />
        <PolarAngleAxis
          dataKey="domain"
          tick={{ fill: '#374151', fontSize: 12 }}
        />
        <PolarRadiusAxis
          domain={[0, 100]}
          tick={{ fill: '#9ca3af', fontSize: 10 }}
          tickCount={6}
        />
        <Radar
          dataKey="score"
          stroke="#3b82f6"
          fill="#3b82f6"
          fillOpacity={0.2}
          strokeWidth={2}
        />
        <Tooltip
          contentStyle={{ borderRadius: '8px', border: '1px solid #e5e7eb' }}
          formatter={(value: any) => [`${value ?? 0}%`, 'Score']}
        />
      </RadarChart>
    </ResponsiveContainer>
  );
}
