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

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

const SKILL_LEGEND = [
  { cat: 'green', colorLabel: 'Vert', meaning: 'Efficace' },
  { cat: 'blue', colorLabel: 'Bleu', meaning: 'Confiant' },
  { cat: 'yellow', colorLabel: 'Jaune', meaning: 'Suffisant' },
  { cat: 'red', colorLabel: 'Rouge', meaning: 'Fébrile' },
]

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>
      <ul className="home-skills__legend" aria-label="Légende des couleurs des compétences">
        {SKILL_LEGEND.map(({ cat, colorLabel, meaning }) => (
          <li key={cat} className="home-skills__legend-item">
            <span
              className={`home-skills__legend-swatch home-skills__legend-swatch--${cat}`}
              aria-hidden
            />
            <span className="home-skills__legend-text">
              <span className="home-skills__legend-color">{colorLabel}</span>
              <span aria-hidden> : </span>
              <span className="home-skills__legend-meaning">{meaning}</span>
            </span>
          </li>
        ))}
      </ul>
    </section>
  )
}
