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

import { Component } from '@core/utils/BEM';

// Style
/* istanbul ignore next */
if (typeof window !== 'undefined') require('./style.scss');

export default class Title extends Component {
  constructor(props) {
    super(props, 'Title');
  }

  static propTypes = {
    ...Component.propTypes,

    /** Titles semantic priority.
     */
    level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),

    /** Title text (or via `children`.)
     */
    text: PropTypes.string,
  };

  static defaultProps = {
    level: 2,
    text: 'Title',
  };

  get Tag() {
    return `h${this.props.level}`;
  }

  render() {
    return (
      <this.Tag
        {...this.props}
        className={[this.bem(this.props.bem), ` Title${this.props.level}`, this.props.className].join(' ')}
        style={this.props.style}
      >
        {this.props.children || this.props.text}
      </this.Tag>
    );
  }
}
