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

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

export default class Error extends Component {
	static propTypes = {
		heading: PropTypes.string,
		message: PropTypes.string,
		showChat: PropTypes.bool
	};

	static defaultProps = {
		heading: 'We\'re sorry, an unexpected error has occurred.',
		message: 'Unknown Error',
		showChat: false
	};

	render() {
		return (
			<div
				className={styles.Error}
			>
				<div>
					<h1>
						{this.props.heading}
					</h1>
					<h4>
						{this.props.message}
					</h4>
					{
						this.props.showChat && (
							<h5>
								<a href="#hs-chat-open">
									<SemanticIcon
										name="comment alternate"
									/>
									Chat with Support
								</a>
							</h5>
						)
					}
				</div>
			</div>
		);
	}
}
