// Rôle : affiche une carte monstre retournable avec faiblesses et hitzones.
import { useState } from "react";
import { DamageTable } from "./DamageTable.jsx";
import { IconRow } from "./IconRow.jsx";
import { assetPath, getConditionValues } from "../utils.js";

export function MonsterCard({ monster, t }) {
  const [flipped, setFlipped] = useState(false);
  const weaknesses = getConditionValues(monster.weaknesses);
  const ailments = getConditionValues(monster.ailments).filter((value) => value !== "none");

  return (
    <article
      className={`mhwilds-card monster-card ${flipped ? "is-flipped" : ""}`}
      onClick={() => setFlipped(!flipped)}
      onKeyDown={(event) => {
        if (event.key !== "Enter" && event.key !== " ") return;
        event.preventDefault();
        setFlipped((value) => !value);
      }}
      tabIndex="0"
      role="button"
      aria-pressed={flipped}
      aria-label={`Afficher les dégâts de ${t(monster.name, { capitalize: true })}`}
    >
      <div className="mhwilds-card-inner">
        <div className="mhwilds-card-face mhwilds-card-front">
          <span className="mhwilds-flip-indicator" aria-hidden="true">
            <span className="ui-icon ui-icon-flip" />
          </span>
          <div className="mhwilds-card-art">
            <img src={assetPath(monster.name)} alt={t(monster.name, { capitalize: true })} loading="lazy" />
          </div>
          <div className="mhwilds-card-body">
            <p className="eyebrow">{t(monster.type, { capitalize: true })}</p>
            <h2>{t(monster.name, { capitalize: true })}</h2>
            <IconRow label={t("weaknesses", { capitalize: true })} values={weaknesses} t={t} />
            <IconRow label={t("ailments", { capitalize: true })} values={ailments.length ? ailments : ["none"]} t={t} />
          </div>
        </div>
        <div className="mhwilds-card-face mhwilds-card-back">
          <span className="mhwilds-flip-indicator" aria-hidden="true">
            <span className="ui-icon ui-icon-flip" />
          </span>
          <div className="mhwilds-card-body">
            <p className="eyebrow">Détails</p>
            <h2>{t(monster.name, { capitalize: true })}</h2>
          </div>
          <DamageTable rows={monster.hitzones || []} t={t} />
        </div>
      </div>
    </article>
  );
}
