Add mentor and learning status updates to skill evaluation

- Introduced `updateSkillMentorStatus` and `updateSkillLearningStatus` functions to manage mentor and learning preferences for skills.
- Updated `SkillEvaluationCard` to include buttons for toggling mentor and learning statuses with corresponding icons.
- Enhanced `SkillEvaluationGrid` and `SkillEvaluation` components to pass new status update handlers.
- Modified `SkillEvaluation` type to accommodate new properties for mentor and learning status.

components/evaluation/skill-evaluation-card.tsx

@@ -1,16 +1,18 @@
-import { ExternalLink, Info, X } from "lucide-react";
+import { ExternalLink, Info, X, UserCheck, GraduationCap } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Skill, SkillLevel, SKILL_LEVELS } from "@/lib/types";
+import { Skill, SkillLevel, SKILL_LEVELS, SkillEvaluation } from "@/lib/types";
 import { TechIcon } from "@/components/icons/tech-icon";
 
 interface SkillEvaluationCardProps {
   skill: Skill;
-  currentLevel: SkillLevel;
+  skillEvaluation: SkillEvaluation;
   onUpdateSkill: (skillId: string, level: SkillLevel) => void;
+  onUpdateMentorStatus: (skillId: string, canMentor: boolean) => void;
+  onUpdateLearningStatus: (skillId: string, wantsToLearn: boolean) => void;
   onRemoveSkill: (skillId: string) => void;
 }
 
@@ -42,10 +44,13 @@ function getLevelColorBorder(level: Exclude<SkillLevel, null>) {
 
 export function SkillEvaluationCard({
   skill,
-  currentLevel,
+  skillEvaluation,
   onUpdateSkill,
+  onUpdateMentorStatus,
+  onUpdateLearningStatus,
   onRemoveSkill,
 }: SkillEvaluationCardProps) {
+  const currentLevel = skillEvaluation.level;
   return (
     <div className="group relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3 hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10">
       <div className="flex items-center justify-between">
@@ -135,6 +140,62 @@ export function SkillEvaluationCard({
             );
           })}
 
+          {/* Mentor and Learning Status Icons */}
+          <div className="flex items-center gap-1.5 ml-2 border-l border-white/10 pl-2">
+            {/* Mentor Icon */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() =>
+                    onUpdateMentorStatus(skill.id, !skillEvaluation.canMentor)
+                  }
+                  className={`p-1 rounded-md transition-all hover:scale-110 ${
+                    skillEvaluation.canMentor
+                      ? "bg-green-500/20 text-green-400 hover:bg-green-500/30"
+                      : "text-slate-400 hover:text-green-400 hover:bg-green-500/10"
+                  }`}
+                >
+                  <UserCheck className="h-4 w-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">
+                  {skillEvaluation.canMentor
+                    ? "Peut mentorer"
+                    : "Peut mentorer"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+
+            {/* Learning Icon */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() =>
+                    onUpdateLearningStatus(
+                      skill.id,
+                      !skillEvaluation.wantsToLearn
+                    )
+                  }
+                  className={`p-1 rounded-md transition-all hover:scale-110 ${
+                    skillEvaluation.wantsToLearn
+                      ? "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
+                      : "text-slate-400 hover:text-blue-400 hover:bg-blue-500/10"
+                  }`}
+                >
+                  <GraduationCap className="h-4 w-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">
+                  {skillEvaluation.wantsToLearn
+                    ? "Veut apprendre"
+                    : "J'aimerais apprendre"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+
           {/* Remove button */}
           <div className="flex items-center ml-2 border-l border-white/10 pl-2">
             <Tooltip>