import { CategoryCard } from "./category-card";

interface CategoryBreakdownProps {
  radarData: Array<{
    category: string;
    score: number;
    maxScore: number;
  }>;
  userEvaluation: {
    evaluations: Array<{
      category: string;
      selectedSkillIds: string[];
      skills: Array<{
        skillId: string;
        level: string | null;
      }>;
    }>;
  };
  skillCategories: Array<{
    category: string;
    icon: string;
    skills: Array<{
      id: string;
      name: string;
      icon?: string;
      importance: "incontournable" | "majeure" | "standard";
    }>;
  }>;
}

export function CategoryBreakdown({
  radarData,
  userEvaluation,
  skillCategories,
}: CategoryBreakdownProps) {
  return (
    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
      <div className="mb-6">
        <h3 className="text-xl font-bold text-white mb-2">
          Détail par catégorie
        </h3>
        <p className="text-slate-400 text-sm">
          Vue détaillée de votre progression dans chaque domaine
        </p>
      </div>
      <div className="space-y-3">
        {radarData.map((category) => {
          const categoryEval = userEvaluation.evaluations.find(
            (e) => e.category === category.category
          );
          const skillCategory = skillCategories.find(
            (sc) => sc.category === category.category
          );

          return (
            <CategoryCard
              key={category.category}
              category={category}
              categoryEval={categoryEval}
              skillCategory={skillCategory}
            />
          );
        })}
      </div>
    </div>
  );
}