import React from "react";

import { NotificationPopoverProps } from "typings";
import { notificationTypeToBg } from "@/utils/helpers";

const NotificationPopover: React.FC<NotificationPopoverProps> = ({
  notification,
  onClose,
}) => {
  return (
    <div
      className={
        "fixed bottom-2 right-2 flex items-start z-50 p-4 " +
        notificationTypeToBg(notification.type)
      }
    >
      <div className="flex">
        <div className="ml-3">
          <h3 className="text-2xl font-bold text-white">{notification.type}</h3>
          <div className="mt-2 font-medium text-lg text-white">
            {notification.message}
          </div>
        </div>
        <button onClick={onClose} className="text-white h-0 mt-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={2}
            stroke="currentColor"
            className="w-6 h-6"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>
  );
};

export default NotificationPopover;
