import { assetPath } from "../utils.js";

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

  const columns = Object.keys(rows[0]);

  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[column], { capitalize: true })}>{t(row[column], { capitalize: true })}</td>
              ) : (
                <td key={column}><img src={assetPath(`${row[column]}-stars`)} alt={`${row[column]} étoiles`} /></td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}