"use client";

import { useAlertStore } from "@/_stores/useAlertStore";
import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
import { Info } from 'lucide-react';

export default function Alert() {
  const { isOpen, message, severity, closeAlert } = useAlertStore();

  if (!isOpen) return null;

  const styles = {
    success: "bg-green-600/5 text-green-600",
    error: "bg-red-600/5 text-red-600",
    warning: "bg-yellow-600/5 text-yellow-600",
    info: "bg-blue-600/5 text-blue-600",
  };

  return (
      <Dialog open={isOpen} onClose={() => closeAlert()} as="div" className="relative z-100 focus:outline-none">
        <div className={`fixed top-2 z-100 w-screen h-screen overflow-y-auto`}>
           <div className={`flex justify-end items-start p-4 h-full`}>
            <DialogPanel
              transition
              className={`w-full m-0 max-w-sm rounded-xl shadow-lg p-4 backdrop-blur-2xl duration-300 ease-out data-closed:transform-[scale(95%)] data-closed:opacity-0 ${styles[severity]}`}
            >
              <DialogTitle className="text-sm/6 flex justify-between items-center font-medium">
               {message}
               <Info className="inline ml-2 size-4" />
              </DialogTitle>
            </DialogPanel>
          </div>
        </div>
      </Dialog>
  );
}