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

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

export default function CardTitle({ children, icon, h2, ...props }) {

  const classes = classNames({
    [styles.label]: true,
    [styles.h2]: h2
  });

  return (
    <div className={classes}>
      {
        icon ? <Icon name={icon} large style={{ marginRight: 20 }} /> : null
      }
      <div className="ellipsis">
        {children}
      </div>
    </div>
  );
}

CardTitle.propTypes = {
  children: PropTypes.node.isRequired,
  icon: PropTypes.string,
  h2: PropTypes.bool
};

CardTitle.defaultProps = {
  icon: undefined,
  h2: undefined
};