"use client";

import Image from "next/image";

export default function AppLoader({ loading }: { loading: boolean }) {
  if (!loading) return null;

  return (
    <div className="fixed inset-0 z-[99999] flex items-center justify-center bg-white">
      <div className="flex flex-col items-center gap-3">

        {/* spinning ring + logo */}
        <div className="relative w-[90px] h-[90px]">
          <svg
            className="absolute inset-0 w-full h-full"
            style={{ animation: "spin 1.6s linear infinite" }}
            viewBox="0 0 90 90"
          >
            <circle cx="45" cy="45" r="40" fill="none" stroke="#f0ece8" strokeWidth="3" />
            <circle
              cx="45" cy="45" r="40"
              fill="none"
              stroke="#dda16b"
              strokeWidth="3"
              strokeLinecap="round"
              strokeDasharray="60 192"
            />
          </svg>

          {/* logo inside ring */}
          <div className="absolute inset-[10px] rounded-full bg-[#faf8f5] flex items-center justify-center">
            <Image
              src="/images/logo-icon.png"
              alt="logo"
              width={72}
              height={72}
              priority
              style={{ objectFit: "contain" }}
            />
          </div>
        </div>

        {/* text */}
        <div className="flex flex-col items-center gap-1">
          <p className="text-sm font-medium tracking-wide text-[rgba(var(--primary),1)]">Dulhe Sahab</p>
          <p className="text-xs text-gray-400">Creating your experience…</p>
        </div>
      </div>

      <style jsx>{`
        @keyframes spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}