"use client";

import { type HTMLMotionProps, motion } from "motion/react";

interface FadeInProps
  extends Omit<HTMLMotionProps<"div">, "initial" | "whileInView" | "viewport"> {
  as?: "div" | "span" | "section";
  delay?: number;
  duration?: number;
  ease?: [number, number, number, number];
  scale?: number;
  viewportAmount?: number;
  y?: number;
}

export function FadeIn({
  children,
  y = 30,
  scale,
  delay = 0,
  duration = 0.8,
  ease,
  viewportAmount,
  as = "div",
  ...props
}: FadeInProps) {
  const Component = motion[as];
  const initial: Record<string, number> = { opacity: 0 };
  const animate: Record<string, number> = { opacity: 1 };

  if (y !== 0) {
    initial.y = y;
    animate.y = 0;
  }
  if (scale !== undefined) {
    initial.scale = scale;
    animate.scale = 1;
  }

  return (
    <Component
      initial={initial}
      transition={{ duration, delay, ...(ease ? { ease } : {}) }}
      viewport={{
        once: true,
        ...(viewportAmount ? { amount: viewportAmount } : {}),
      }}
      whileInView={animate}
      {...props}
    >
      {children}
    </Component>
  );
}