import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import styles from './typography.scss';

const Title = ({ level, children, underline, mark, bold, inverse }) => {
  const cx = classnames.bind(styles);

  const Tag = `h${level}`;

  return (
    <Tag
      className={cx(
        'typography',
        'typography_title',
        `typography_title__level_${level}`,
        {
          typography__underline: underline,
          typography__mark: mark,
          typography__bold: bold,
          typography__inverse: inverse,
        }
      )}
    >
      {children}
    </Tag>
  );
};

Title.defaultProps = {
  bold: false,
  level: 1,
  mark: false,
  underline: false,
  inverse: false,
};

Title.propTypes = {
  bold: PropTypes.bool,
  children: PropTypes.node.isRequired,
  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
  mark: PropTypes.bool,
  underline: PropTypes.bool,
  inverse: PropTypes.bool,
};

export default Title;