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

function Alert(props) {
  return (
    <div
      role='alert'
      className={classNames(
        'text-center text-lg font-medium',
        'relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700',
        props.className
      )}
    >
      {props.content}
    </div>
  );
}

Alert.propTypes = {
  content: PropTypes.node.isRequired,
  className: PropTypes.string
};

export default Alert;
