import React from 'react';
import { MdClose } from 'react-icons/md';

type Props = {
  message: string;
  type?: 'success' | 'error';
  onClose: () => void;
};

const AlertModal = ({
  message,
  type = 'error',
  onClose,
}: Props): JSX.Element => {
  return (
    <div className="p-2 absolute right-0 top-0 z-50">
      <div
        className={`${
          type === 'error' ? 'bg-danger' : 'bg-success'
        } shadow-2xl flex justify-between items-center space-x-4 w-full md:w-72 lg:w-96 h-full text-white p-4 rounded-md`}
      >
        <div className="w-full rounded-xl p-2">
          <p className="text-xs font-normal capitalize">
            Message: <br /> {message}
          </p>
        </div>
        <div
          onClick={onClose}
          className={`${
            type === 'success'
              ? 'text-success hover:text-success/60'
              : 'text-danger hover:text-danger/60'
          } bg-white p-1 rounded-md text-2xl cursor-pointer`}
        >
          <MdClose />
        </div>
      </div>
    </div>
  );
};

export default AlertModal;