"use client";

import { useLoaderStore } from "@/app/store/loaderStore";

export default function GlobalLoader() {
  const isLoading = useLoaderStore((s) => s.isLoading);

  if (!isLoading) return null;

  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 9999,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 20,
        background: "rgba(255,255,255,0.85)",
        backdropFilter: "blur(3px)",
      }}
    >
      {/* Logo circle */}
      {/* <div
        style={{
          width: 64,
          height: 64,
          borderRadius: "50%",
          background: "#fceef3",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          animation: "pulseScale 1.2s ease-in-out infinite",
        }}
      >
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#d4537e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" />
        </svg>
      </div> */}

      {/* Dots */}
      <div style={{ display: "flex", gap: 8 }}>
        <span style={{ ...dotStyle, animationDelay: "0s" }} />
        <span style={{ ...dotStyle, animationDelay: "0.15s" }} />
        <span style={{ ...dotStyle, animationDelay: "0.3s" }} />
      </div>

      <style jsx>{`
        @keyframes pulseScale {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.08); }
        }
        @keyframes dotBounce {
          0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
          40% { transform: translateY(-8px); opacity: 1; }
        }
      `}</style>
    </div>
  );
}

const dotStyle: React.CSSProperties = {
  width: 9,
  height: 9,
  borderRadius: "50%",
  background: "#d4537e",
  display: "inline-block",
  animation: "dotBounce 1s infinite ease-in-out",
};