interface Column {
  key: string
  label: string
}

interface Props {
  columns: Column[]
  rows: Record<string, unknown>[]
  emptyText: string
}

/** Tabla genérica de solo lectura para los historiales (seguridad, transacciones, baneos). */
export function HistoryTable({ columns, rows, emptyText }: Props) {
  return (
    <table className="max-center-table-aligned">
      <thead>
        <tr>
          {columns.map((c) => (
            <th key={c.key}>{c.label}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.length > 0 ? (
          rows.map((row, i) => (
            <tr key={i}>
              {columns.map((c) => (
                <td key={c.key}>{String(row[c.key] ?? '')}</td>
              ))}
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan={columns.length} className="centered">
              <span>{emptyText}</span>
            </td>
          </tr>
        )}
      </tbody>
    </table>
  )
}
