import { type CSSProperties, type ReactNode, useRef } from "react";
import { m, useInView, type Variants } from "framer-motion";

import { fadeInVariant } from "@/helpers/animation";

interface MotionProps {
  variants?: Variants;
  animate?: boolean;
  triggerOnce?: boolean;
  className?: string;
  style?: CSSProperties;
  children: ReactNode;
}

export default function Motion({
  variants = fadeInVariant,
  animate,
  triggerOnce = false,
  children,
  ...props
}: MotionProps) {
  const ref = useRef(null);
  const inView = useInView(ref, {
    once: triggerOnce,
    amount: 0.1,
  });

  return (
    <m.div
      ref={ref}
      initial="initial"
      animate={animate ?? inView ? "animate" : "initial"}
      variants={variants}
      exit="exit"
      {...props}
    >
      {children}
    </m.div>
  );
}