import { createPortal } from "react-dom";
import { Button } from "@/components/ui/button";
import { CircleCheckBig, X } from "lucide-react";
import { useApiServices } from "@/store/admin/apiServices";

const ApiServiceUpdatedModal = () => {
  const resetUpdated = useApiServices((state) => state.resetUpdated);

  const portalRoot = document.getElementById("portal-root");
  if (!portalRoot) return null;

  return createPortal(
    <div className="fixed z-50 inset-0 flex items-center justify-center bg-black/30 dark:bg-white/30 px-5">
      <div className="rounded-2xl flex flex-col items-stretch bg-white dark:bg-black min-w-[300px] max-w-md w-full">
        <div className="flex flex-row items-center justify-between p-4 border-b dark:border-gray-800 border-gray-300">
          <p className="text-gray-800 dark:text-gray-200">Service Updated</p>
          <Button variant="icon" onClick={resetUpdated}>
            <X />
          </Button>
        </div>
        <div className="p-4">
          <div className="mb-4 flex flex-col items-center p-4 text-green-400 gap-3">
            <CircleCheckBig size={64} />
            <h2 className="text-gray-800 dark:text-gray-200 text-xl">
              Service has updated successfully!
            </h2>
          </div>
          <div className="mt-4 w-full">
            <Button
              variant="outlined"
              className="w-full"
              onClick={resetUpdated}
            >
              Close
            </Button>
          </div>
        </div>
      </div>
    </div>,
    portalRoot,
  );
};

export default ApiServiceUpdatedModal;