import React, { FC } from 'react';
import classNames from 'classnames';

import css from './index.module.css';
import { getModifier } from '../../helpers/getModifier';

export interface NotificationProps {
  message: string;
  isOpen?: boolean;
  type?: 'error' | 'info' | 'success' | 'warning';
  handleClose?: () => void;
}

const Notification: FC<NotificationProps> = ({
  message,
  isOpen,
  type = 'info',
  handleClose,
}) => {
  const notificationClassNames = classNames(css.notification, {
    [`${css[`notification${getModifier(type)}`]}`]: type,
  });

  if (!isOpen) {
    return null;
  }

  return (
    <div className={notificationClassNames}>
      <div className={css.notification__message}>{message}</div>
      <button className={css.notification__close} onClick={handleClose}>
        x
      </button>
    </div>
  );
};

export default Notification;