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

export function ProjetsGrid({ projects }) {
  return (
    <ul className="projets-grid">
      {projects.map((projet) => (
        <li key={projet.id} className="projets-grid__cell">
          <article className="projet-card" aria-labelledby={`projet-title-${projet.id}`}>
            <div className="projet-card__media">
              <img
                src={projet.imageSrc}
                alt={projet.imageAlt}
                className="projet-card__img"
                loading="lazy"
                decoding="async"
                referrerPolicy="no-referrer"
              />
            </div>
            <div className="projet-card__body">
              <h2 className="projet-card__title" id={`projet-title-${projet.id}`}>
                {projet.title}
              </h2>
              <ul className="projet-card__skills" aria-label="Compétences">
                {projet.skills.map((skill) => (
                  <li key={skill}>
                    <span
                      className={`home-skill home-skill--${getSkillCategory(skill)}`}
                    >
                      {skill}
                    </span>
                  </li>
                ))}
              </ul>
              <p className="projet-card__desc">{projet.description}</p>
              <a
                href={projet.link}
                className="projet-card__link"
                target="_blank"
                rel="noopener noreferrer"
              >
                {projet.linkLabel}
              </a>
            </div>
          </article>
        </li>
      ))}
    </ul>
  )
}
