import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

const Headline = ({ children, className, level, variant }) => {
  const HeadlineElement = `h${level}`;

  return <HeadlineElement className={classnames(className, variant)}>{children}</HeadlineElement>;
};

Headline.propTypes = {
  className: PropTypes.string,
  children: PropTypes.any.isRequired,
  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
  variant: PropTypes.oneOf([
    'display-xx-large',
    'display-x-large',
    'display-large',
    'display-medium',
    'display-small',
    'display-x-small',
    'large',
    'body',
    'tiny',
    'display-xx-large--soft',
    'display-x-large--soft',
    'display-large--soft',
    'display-medium--soft',
    'display-small--soft',
    'display-x-small--soft',
  ]),
};

Headline.defaultProps = {
  className: null,
  level: 1,
  variant: null,
};

export default Headline;