import { SKILLS } from '../data/skills.js'

export function HomeProfilCompetencesPanel() {
  return (
    <div className="home-intro home-intro--profil-box">
      <section
        className="home-profil-traits"
        aria-labelledby="home-profil-competences-title"
      >
        <h2 className="home-intro__heading" id="home-profil-competences-title">
          Compétence
        </h2>
        <ul className="home-profil-traits__list">
          {SKILLS.map(({ label, cat, desc }) => (
            <li key={label} className="home-profil-traits__row">
              <span
                className={`home-profil-traits__label home-skill home-skill--${cat}`}
              >
                {label}
              </span>
              <p className="home-profil-traits__desc">{desc}</p>
            </li>
          ))}
        </ul>
      </section>
    </div>
  )
}