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

import '../base';
import styles from './Title.styl';

export default function Title({ secondary, children, subtitle, warning, error, info, success, ...props }) {

  const titleContainerClasses = classNames({
    [styles.titleContainer]: true,
    [styles.secondary]: secondary,
    [styles.warning]: warning,
    [styles.error]: error,
    [styles.info]: info,
    [styles.success]: success,
    [styles.emphasize]: warning || error || info || success
  });

  const subTitleClasses = classNames({
    [styles.subTitle]: true,
    [styles.secondary]: secondary
  });

  return (
    <div className={titleContainerClasses}>
      {subtitle && (
        <div className={subTitleClasses}>
          {subtitle}
        </div>
      )}
      <div className={styles.titleCaption}>
        {children}
      </div>
    </div>
  );
}

Title.propTypes = {
  children: PropTypes.node,
  subtitle: PropTypes.string,
  error: PropTypes.bool,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool
};

Title.defaultProps = {
  children: undefined,
  subtitle: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined
};