import { PolarAngleAxis, PolarGrid, Radar, RadarChart, ResponsiveContainer } from 'recharts'
import type { ReadinessCategory } from '../lib/types'

const SHORT: Record<string, string> = {
  'Clearance Readiness': 'Clearance',
  'Skills Readiness': 'Skills',
  'Certification Readiness': 'Certs',
  'Customer Readiness': 'Customer',
  'Experience Readiness': 'Experience',
  'Availability Readiness': 'Availability',
}

// WorkforceDNA™ — a radar of the candidate's readiness dimensions (Candidate Profile, Screen 2).
export function WorkforceDNA({ categories }: { categories: ReadinessCategory[] }) {
  const data = categories.map((c) => ({ axis: SHORT[c.name] ?? c.name, value: Number(c.score) }))
  return (
    <div className="h-[260px] w-full">
      <ResponsiveContainer>
        <RadarChart data={data} outerRadius="70%">
          <PolarGrid stroke="#1d3a5f" />
          <PolarAngleAxis dataKey="axis" tick={{ fill: '#91a4bd', fontSize: 11 }} />
          <Radar
            dataKey="value"
            stroke="#4f7fd0"
            fill="#2e5eaa"
            fillOpacity={0.45}
            dot={{ r: 2.5, fill: '#d4a017' }}
            isAnimationActive
          />
        </RadarChart>
      </ResponsiveContainer>
    </div>
  )
}