/* eslint-disable @next/next/no-img-element */

"use client";

import { cn } from "@/libs/utils";
import { useServerDataCtx } from "@/providers/server-data-provider/server-data-provider";
import { useLoaderStore } from "@/store/loader-store/use-loader-store";

const Loader = () => {
  const { processes } = useLoaderStore();
  const { clientConfig } = useServerDataCtx();
  const logoPath = clientConfig?.logoUrl;

  return (
    <div
      className={cn(
        "fixed left-0 top-0 z-[90] flex h-full w-full items-center justify-center bg-white",
        "transition-opacity duration-300 ease-in-out",
        "opacity-100 pointer-events-auto",
        !processes.some((item) => item.open) && "opacity-0 pointer-events-none",
      )}
    >
      <div>
        <div className="mb-10">
          <div className="cursor-pointer">
            <img src={logoPath} alt="logo" className="h-auto w-full max-w-24" />
          </div>
        </div>
        <div className="relative">
          <div className="absolute bottom-1/2 right-1/2 translate-x-1/2 translate-y-1/2">
            <div className="animate-spin rounded-full bg-gradient-to-tr from-primary-500 to-transparent p-1">
              <div className="rounded-full bg-white">
                <div className="size-6 rounded-full" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Loader;