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;
  onRemoveSkill: (category: string, skillId: string) => void;
}

export function SkillEvaluationGrid({
  currentCategory,
  currentEvaluation,
  onUpdateSkill,
  onRemoveSkill,
}: SkillEvaluationGridProps) {
  const getSkillLevel = (skillId: string): SkillLevel => {
    const skillEval = currentEvaluation?.skills.find(
      (s) => s.skillId === skillId
    );
    return skillEval?.level || null;
  };

  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 currentLevel = getSkillLevel(skill.id);

          return (
            <SkillEvaluationCard
              key={skill.id}
              skill={skill}
              currentLevel={currentLevel}
              onUpdateSkill={(skillId, level) =>
                onUpdateSkill(currentCategory.category, skillId, level)
              }
              onRemoveSkill={(skillId) =>
                onRemoveSkill(currentCategory.category, skillId)
              }
            />
          );
        })}
      </div>
    </div>
  );
}