// Rôle : affiche une carte d'affixe Diablo IV et ses catégories.
import { getCategoryIconStyle, getCategoryLabel } from "./utils.js";

export function Diablo4AffixCard({ affix, categoryMap }) {
  return (
    <article className="compact-data-card diablo4-affix-card">
      <div className="diablo4-affix-card-body">
        <h2>{affix.label}</h2>
        <div className="diablo4-category-list" aria-label="Catégories">
          {(affix.categories || []).map((categoryId) => {
            const category = categoryMap[categoryId] || categoryId;
            return (
              <span className={`tone-${category.tone || "default"}`} key={categoryId}>
                <span className="diablo4-category-icon" aria-hidden="true" style={getCategoryIconStyle(category)} />
                {getCategoryLabel(category)}
              </span>
            );
          })}
        </div>
      </div>
    </article>
  );
}
