"use client";
import { useEffect, useRef, type ReactNode } from "react";

export function AdminSurface({ children }: { children: ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let context: { revert: () => void } | undefined;
    let disposed = false;
    import("gsap").then(({ gsap }) => {
      if (disposed) return;
      context = gsap.context(() => {
        gsap.fromTo(
          ref.current,
          { y: 6, opacity: 0.85 },
          { y: 0, opacity: 1, duration: 0.25, ease: "power3.out", clearProps: "transform,opacity" },
        );
      }, ref);
    });
    return () => {
      disposed = true;
      context?.revert();
    };
  }, []);
  return (
    <div ref={ref} className="space-y-6">
      {children}
    </div>
  );
}