import { TechIcon } from "@/components/icons/tech-icon";
import { getSkillLevelLabel } from "@/lib/score-utils";
import { getImportanceColors } from "@/lib/tech-colors";

interface SkillProgressProps {
  skill: {
    id: string;
    name: string;
    icon?: string;
    importance: "incontournable" | "majeure" | "standard";
  };
  skillEval?: {
    skillId: string;
    level: string | null;
  };
}

export function SkillProgress({ skill, skillEval }: SkillProgressProps) {
  const colors = getImportanceColors(skill.importance);

  return (
    <div
      className={`flex items-center justify-between p-2 ${colors.bg} border ${colors.border} rounded-lg`}
    >
      <div className="flex items-center gap-2">
        <TechIcon
          iconName={skill.icon || ""}
          className={`w-4 h-4 ${colors.text}`}
          fallbackText={skill.name}
        />
        <span className={`text-sm ${colors.text}`}>{skill.name}</span>
      </div>
      <div className="flex items-center gap-2">
        {skillEval?.level && (
          <span className="text-xs text-slate-400">
            {getSkillLevelLabel(skillEval.level)}
          </span>
        )}
      </div>
    </div>
  );
}