import React, { FC } from 'react';
import { isObject } from 'lodash';

export interface Props {
    title?: string;
    subject?: object;
}

export const CLASSNAME = 'InfoTable';
export const TESTID_TITLE = 'table-title';

const InfoTable: FC<Props> = ({ title, subject = {} }) => (
    <div className={CLASSNAME}>
        {title && <h3 data-testid={TESTID_TITLE}>{title}</h3>}
        <table className="table">
            <tbody>
                {Object.entries(subject).map(([key, value]) => (
                    <tr key={key}>
                        <td>{key}</td>
                        <td>{!isObject(value) ? value?.toString() : JSON.stringify(value, null, 2)}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
);

export default InfoTable;