"use client";

import { useLoading } from "./useLoading";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";

export function LoadingHost() {
    const {count} = useLoading();

    if (count === 0) return null;

    return (
        <div className="fixed inset-0 w-full h-full bg-transparent flex justify-center items-center pointer-events-auto z-100"
            onClick={(e) => e.stopPropagation()}
        >
            <div className="relative w-20 h-20 bg-black/30 rounded-xl">
                <LoadingSpinner className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" size={32} />
            </div>
        </div>
    );
}