import React from 'react';
import { Table } from 'react-bootstrap';
import styles from './ParameterTableWidget.module.css';

function ParameterTableWidget(props) {
  const { names, values, parameters, header, striped = true } = props;
  const parameterNames = names?.trim().split(' ');
  const parameterValues = values?.trim().split(' ');

  const allParams = [
    ...(parameterNames && parameterValues
      ? parameterNames.map((name, i) => ({ name, value: parameterValues[i] }))
      : []),
    ...(parameters || []),
  ];

  return (
    <Table striped={striped} condensed>
      {header && (
        <thead>
          <tr>
            <th colSpan="2">{header}</th>
          </tr>
        </thead>
      )}
      <tbody>
        {allParams.map(({ name, value }) => (
          <tr
            key={name}
            className={styles.row}
            data-empty={!value || undefined}
          >
            <td>{name}</td>
            <td>{value}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export default ParameterTableWidget;
