// Rôle : affiche les hitzones d'un monstre sous forme de tableau compact.
import { assetPath } from "../utils.js";

const PHYSICAL_COLUMNS = ["cut", "blunt", "ammo"];
const ELEMENTAL_COLUMNS = ["fire", "water", "thunder", "ice", "dragon"];
const COLUMNS = ["name", ...PHYSICAL_COLUMNS, ...ELEMENTAL_COLUMNS];

function hitzoneValue(row, column) {
  if (column === "name") return row.name;
  return row.physical?.[column] ?? row.elemental?.[column];
}

export function DamageTable({ rows, t }) {
  if (!rows.length) return null;

  return (
    <div className="damage-table-wrap legacy-scrollbar">
      <table className="damage-table">
        <thead>
          <tr>
            {COLUMNS.map((column) => (
              <th key={column}>
                {column === "name" ? "" : <img src={assetPath(column)} alt={t(column, { capitalize: true })} title={t(column, { capitalize: true })} />}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, rowIndex) => (
            <tr key={`${row.name}-${rowIndex}`}>
              {COLUMNS.map((column) => column === "name" ? (
                <td key={column} title={t(row.name, { capitalize: true })}>{t(row.name, { capitalize: true })}</td>
              ) : (
                <td key={column}><img src={assetPath(`${hitzoneValue(row, column)}-stars`)} alt={`${hitzoneValue(row, column)} étoiles`} /></td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}