"use client";

import { motion } from "framer-motion";

export function InteractiveAuroraBackground({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-screen w-full bg-gray-950">
      {/* 
        اینجا اصل جادو اتفاق می‌افتد.
        یک شبه‌المان (pseudo-element) روی کل صفحه کشیده می‌شود.
        پس‌زمینه آن یک گرادیان شعاعی (radial-gradient) است که در موقعیت متغیرهای --x و --y قرار گرفته.
        این متغیرها توسط حرکت موس آپدیت می‌شوند.
      */}
      <div
        className="
          absolute inset-0 z-0
          bg-[radial-gradient(40%_40%_at_var(--x,30%)_var(--y,30%),#214374_0%,transparent_100%)]
          [background-size:150%_150%]
          [background-repeat:no-repeat]
        "
        onMouseMove={(e) => {
          const { clientX, clientY, currentTarget } = e;
          const { left, top, width, height } = currentTarget.getBoundingClientRect();
          const xPercent = ((clientX - left) / width) * 100;
          const yPercent = ((clientY - top) / height) * 100;

          currentTarget.style.setProperty("--x", `${xPercent.toFixed(2)}%`);
          currentTarget.style.setProperty("--y", `${yPercent.toFixed(2)}%`);
        }}
      />
      
      {/* خطوط گرید برای حفظ حس مهندسی */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] z-10 pointer-events-none" />

      {/* محتوای اصلی صفحه در لایه بالاتر قرار می‌گیرد */}
      <div className="relative z-20">{children}</div>
    </div>
  );
}