import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Label as SemanticLabel,
	Icon as SemanticIcon
} from 'semantic-ui-react';

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

export default class ChartLegend extends Component {
	static propTypes = {
		items: PropTypes.array.isRequired,
		centered: PropTypes.bool,
		margin: PropTypes.bool
	};

	static defaultProps = {
		centered: false,
		margin: true
	};

	render() {
		return (
			<SemanticLabel.Group
				className={`${styles.LabelGroup} ${this.props.centered ? 'centered' : ''} ${!this.props.margin ? 'noMargin' : ''}`}
			>
				{
					this.props.items.map(item => (
						<SemanticLabel
							basic
							key={item.title}
						>
							<SemanticIcon
								name="circle"
								style={{
									color: item.color
								}}
							/>
							<SemanticLabel.Detail>
								{item.title}
							</SemanticLabel.Detail>
						</SemanticLabel>
					))
				}
			</SemanticLabel.Group>
		);
	}
}
