import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import 'reset-css/reset.css';
import '../color/color';
import '../typography/typography';
import css from './section-headline.css';

const SectionHeadline = ({
  type,
  headline,
  subheadline,
  heavy,
  inverse,
  rule,
  href,
  className,
}) => {
  const HeadingTag = type;
  return (
    <HeadingTag
      className={classnames(
        css['ds-section-headline'],
        {
          [css['ds-section-headline--heavy']]: heavy,
          [css['ds-section-headline--inverse']]: inverse,
          [css[`ds-section-headline--rule-${rule}`]]: rule,
        },
        className,
      )}
    >
      {href ? (
        <a
          href={href}
          className={classnames(css['ds-section-headline-link'], {
            [css['ds-section-headline-link--inverse']]: inverse,
          })}
        >
          {headline}
        </a>
      ) : (
        headline
      )}

      {subheadline && (
        <>
          {' '}
          <span
            className={classnames(css['ds-section-subheadline'], {
              [css['ds-section-subheadline--heavy']]: heavy,
              [css['ds-section-subheadline--inverse']]: inverse,
            })}
          >
            {subheadline}
          </span>
        </>
      )}
    </HeadingTag>
  );
};

SectionHeadline.defaultProps = {
  headline: '',
  subheadline: '',
  heavy: false,
  inverse: false,
  type: 'h1',
  rule: null,
  href: null,
  className: '',
};

SectionHeadline.propTypes = {
  type: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong']),
  headline: PropTypes.string,
  subheadline: PropTypes.string,
  heavy: PropTypes.bool,
  inverse: PropTypes.bool,
  rule: PropTypes.oneOf(['accent', 'emphasised', 'heavy']),
  href: PropTypes.string,
  className: PropTypes.string,
};

export default SectionHeadline;
