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

import './alert.scss';

const Alert = props => {
  const { className, type, title, text, small, xsmall, children, inlineBlock, ...rest } = props;

  return (
    <div
      className={className}
      styleName={classNames(
        {
          [`alert-${type}`]: type,
          xsmall,
          small,
          'inline-block': inlineBlock
        }
      )}
      {...rest}
      role="alert"
    >
      {title && <p styleName="alert-title">{title}</p>}
      {text && <p styleName="alert-text">{text}</p>}
      {children}
    </div>
  );
};

Alert.propTypes = {
  /** @ignore */
  className: PropTypes.string,
  type: PropTypes.oneOf(['danger', 'warning', 'info', 'success']),
  title: PropTypes.string,
  text: PropTypes.string,
  small: PropTypes.bool,
  xsmall: PropTypes.bool,
  inlineBlock: PropTypes.bool,
  /** @ignore */
  children: PropTypes.node
};

Alert.defaultProps = {
  className: undefined,
  type: 'info',
  title: undefined,
  text: undefined,
  small: false,
  xsmall: false,
  inlineBlock: false,
  children: undefined
};

export default Alert;
