import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Table as SemanticTable
} from 'semantic-ui-react';

import * as styles from './Style.less';

export default class Metadata extends Component {
	static propTypes = {
		title: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.node
		]),
		data: PropTypes.array.isRequired
	};

	static defaultProps = {
		title: null
	};

	render() {
		return (
			<>
				{
					this.props.title && (
						<h1 className={styles.Heading}>
							{this.props.title}
						</h1>
					)
				}
				<SemanticTable
					basic="very"
					striped
					className={styles.Metadata}
				>
					<SemanticTable.Body>
						{
							this.props.data.map((row) => {
								return (
									<SemanticTable.Row key={row.title}>
										<SemanticTable.Cell collapsing>
											{row.title}
										</SemanticTable.Cell>
										<SemanticTable.Cell>
											{row.value}
										</SemanticTable.Cell>
									</SemanticTable.Row>
								);
							})
						}
					</SemanticTable.Body>
				</SemanticTable>
			</>
		);
	}
}
