import React from "react";
/** Tabela simples: colunas declarativas, linhas como objetos. */
export function Tabela({ colunas = [], linhas = [], chave = "id", aoClicarLinha, vazio = "Nada por aqui ainda.", compacta = false, className = "" }) {
  const cls = ["ach-tabela", compacta ? "ach-tabela--compacta" : "", aoClicarLinha ? "ach-tabela--clicavel" : "", className].filter(Boolean).join(" ");
  const celula = (c) => c.alinhar === "num" ? "ach-tabela__num" : c.alinhar === "direita" ? "ach-tabela__direita" : "";
  return (
    <div className="ach-tabela-envoltorio">
      <table className={cls}>
        <thead><tr>{colunas.map((c) => <th key={c.chave} className={celula(c)} style={{ width: c.largura }}>{c.rotulo}</th>)}</tr></thead>
        <tbody>
          {linhas.length === 0 && <tr><td colSpan={colunas.length} className="ach-tabela__vazio">{vazio}</td></tr>}
          {linhas.map((l, i) => (
            <tr key={l[chave] ?? i} onClick={aoClicarLinha ? () => aoClicarLinha(l) : undefined}>
              {colunas.map((c) => <td key={c.chave} className={celula(c)}>{c.renderizar ? c.renderizar(l) : l[c.chave]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}