"use client";

import CustomPortal from "./custom-portal";

interface PropsLoading {
  loading?: boolean;
}

const SCALE = 2.5;

export default function CustomLoading({ loading }: PropsLoading) {
  if (!loading) return null;

  return (
    <CustomPortal>
      <div className="fixed inset-0 flex items-center justify-center bg-black/60 z-[10002]">
        <div
          className="relative"
          style={{
            width: 40 * SCALE,
            height: 40 * SCALE,
          }}
        >
          {Array.from({ length: 12 }).map((_, i) => {
            const rotate = i * 30;

            return (
              <div
                key={i}
                style={{
                  transformOrigin: `${20 * SCALE}px ${20 * SCALE}px`,
                  transform: `rotate(${rotate}deg)`,
                  animation: "spinnerFade 1.2s linear infinite",
                  animationDelay: `${-(1.1 - i * 0.1)}s`,
                }}
                className="absolute top-0 left-0 w-full h-full"
              >
                <div
                  style={{
                    top: 1.5 * SCALE,
                    left: 18.5 * SCALE,
                    width: 3 * SCALE,
                    height: 9 * SCALE,
                  }}
                  className="absolute bg-white rounded-sm"
                />
              </div>
            );
          })}
        </div>
      </div>
    </CustomPortal>
  );
}