export function DataPanel(props: { columns: string[]; empty: string; rows: string[][]; title: string }) {
  return (
    <div className="panel">
      <div className="panelHeader">
        <h2>{props.title}</h2>
        <span>{props.rows.length}</span>
      </div>
      <div className="table" role="table">
        <div className="row head" role="row">
          {props.columns.map((column) => (
            <span key={column}>{column}</span>
          ))}
        </div>
        {props.rows.map((row, index) => (
          <div className="row" role="row" key={`${props.title}-${index}`}>
            {row.map((cell, cellIndex) => (
              <span key={`${props.title}-${index}-${cellIndex}`}>{cell}</span>
            ))}
          </div>
        ))}
        {!props.rows.length && <p className="empty">{props.empty}</p>}
      </div>
    </div>
  );
}