'use client';

import { ProductListResult } from '@/shared/config/api/product/type';
import {
  Dispatch,
  RefObject,
  SetStateAction,
  useEffect,
  useState,
} from 'react';
import { createPortal } from 'react-dom';
import Animation from '../categories/ui/animation';

export function FlyingAnimationPortal({
  product,
  animated,
  imageRef,
  setAnimated,
}: {
  product: ProductListResult;
  animated: boolean;
  imageRef: RefObject<HTMLDivElement | null>;
  setAnimated: Dispatch<SetStateAction<boolean>>;
}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return createPortal(
    <Animation
      product={product}
      animated={animated}
      imageRef={imageRef}
      setAnimated={setAnimated}
    />,
    document.body,
  );
}
