peakskills/components/evaluation/skill-evaluation-grid.tsx

import { SkillCategory, CategoryEvaluation, SkillLevel } from "@/lib/types";
import { SkillEvaluationCard } from "./skill-evaluation-card";

interface SkillEvaluationGridProps {
  currentCategory: SkillCategory;
  currentEvaluation: CategoryEvaluation;
  onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
  onUpdateMentorStatus: (
    category: string,
    skillId: string,
    canMentor: boolean
  ) => void;
  onUpdateLearningStatus: (
    category: string,
    skillId: string,
    wantsToLearn: boolean
  ) => void;
  onRemoveSkill: (category: string, skillId: string) => void;
}

export function SkillEvaluationGrid({
  currentCategory,
  currentEvaluation,
  onUpdateSkill,
  onUpdateMentorStatus,
  onUpdateLearningStatus,
  onRemoveSkill,
}: SkillEvaluationGridProps) {
  const getSkillEvaluation = (skillId: string) => {
    const skillEval = currentEvaluation?.skills.find(
      (s) => s.skillId === skillId
    );
    return (
      skillEval || {
        skillId,
        level: null,
        canMentor: false,
        wantsToLearn: false,
      }
    );
  };

  if (!currentEvaluation.selectedSkillIds.length) {
    return null;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <h3 className="text-xl font-bold text-white">
          {currentCategory.category}
        </h3>
        <div className="px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30">
          <span className="text-xs font-medium text-blue-400">
            {currentEvaluation.selectedSkillIds.length} compétence
            {currentEvaluation.selectedSkillIds.length > 1 ? "s" : ""}
          </span>
        </div>
      </div>

      <div className="space-y-3">
        {currentEvaluation.selectedSkillIds.map((skillId) => {
          const skill = currentCategory.skills.find((s) => s.id === skillId);
          if (!skill) return null;

          const skillEvaluation = getSkillEvaluation(skill.id);

          return (
            <SkillEvaluationCard
              key={skill.id}
              skill={skill}
              skillEvaluation={skillEvaluation}
              onUpdateSkill={(skillId, level) =>
                onUpdateSkill(currentCategory.category, skillId, level)
              }
              onUpdateMentorStatus={(skillId, canMentor) =>
                onUpdateMentorStatus(
                  currentCategory.category,
                  skillId,
                  canMentor
                )
              }
              onUpdateLearningStatus={(skillId, wantsToLearn) =>
                onUpdateLearningStatus(
                  currentCategory.category,
                  skillId,
                  wantsToLearn
                )
              }
              onRemoveSkill={(skillId) =>
                onRemoveSkill(currentCategory.category, skillId)
              }
            />
          );
        })}
      </div>
    </div>
  );
}