"use client";

interface TeamMetricsProps {
  averageSkillLevel: number;
  skillCoverage: number;
  topSkillsCount: number;
  totalMembers: number;
}

export function TeamMetrics({
  averageSkillLevel,
  skillCoverage,
  topSkillsCount,
  totalMembers,
}: TeamMetricsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-center">
      <div>
        <div className="text-xs text-slate-400">Niveau moy.</div>
        <div className="text-sm font-semibold text-white">
          {averageSkillLevel.toFixed(1)}
        </div>
      </div>
      <div>
        <div className="text-xs text-slate-400">Couverture</div>
        <div className="text-sm font-semibold text-white">
          {skillCoverage.toFixed(0)}%
        </div>
      </div>
      <div>
        <div className="text-xs text-slate-400">Top Skills</div>
        <div className="text-sm font-semibold text-white">{topSkillsCount}</div>
      </div>
      <div>
        <div className="text-xs text-slate-400">Membres</div>
        <div className="text-sm font-semibold text-white">{totalMembers}</div>
      </div>
    </div>
  );
}