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

const ARIA_CAT_FR = {
  green: 'Vert',
  blue: 'Bleu',
  yellow: 'Jaune',
  red: 'Rouge',
}

export function HomeSkillsBlock() {
  const byCat = SKILL_CATEGORY_KEYS.reduce((acc, cat) => {
    acc[cat] = SKILLS.filter((s) => s.cat === cat)
    return acc
  }, {})

  return (
    <section className="home-skills" aria-labelledby="home-skills-title">
      <h2 className="home-skills__title" id="home-skills-title">
        Compétence
      </h2>
      <div className="home-skills__rows">
        {SKILL_CATEGORY_KEYS.map((cat) => {
          const items = byCat[cat]
          if (!items.length) return null
          return (
            <ul
              key={cat}
              className="home-skills__row-list"
              aria-label={`Compétences : ${ARIA_CAT_FR[cat]}`}
            >
              {items.map(({ label }) => (
                <li key={label}>
                  <span className={`home-skill home-skill--${cat}`}>
                    {label}
                  </span>
                </li>
              ))}
            </ul>
          )
        })}
      </div>
    </section>
  )
}
