import { arrayToClassName } from '../../utils/utils';

export default function Heading( props ) {
	const baseClassName = 'eps',
		classes = [
			props.className,
		];

	if ( props.variant ) {
		classes.push( baseClassName + '-' + props.variant );
	}

	const Element = () => React.createElement( props.tag, {
		className: arrayToClassName( classes ),
	}, props.children );

	return <Element />;
}

Heading.propTypes = {
	className: PropTypes.string,
	children: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.object,
		PropTypes.arrayOf( PropTypes.object ),
	] ).isRequired,
	tag: PropTypes.oneOf( [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ] ),
	variant: PropTypes.oneOf( [ 'display-1', 'display-2', 'display-3', 'display-4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ] ).isRequired,
};

Heading.defaultProps = {
	className: '',
	tag: 'h1',
};