'use client';

import { motion } from "framer-motion";

type FadeIn = "div" | "section" | "article" | "main" | "aside" | "header" | "footer" | "li" | "span" | "a";

export default function FadeIn({
  as = "div",
  children,
  delay = 0,
  duration = 0.7,
  direction = "up",
  margin = "0px",
  y = 20,
  x = 0,
  className = "",
  id = "",
  href = undefined,
  whileHover,
}: {
  as?: FadeIn;
  children: React.ReactNode;
  delay?: number;
  direction?: "up" | "left" | "right";
  y?: number;
  x?: number;
  className?: string;
  id?: string;
  href?: string;
  whileHover?: any;
  duration?: number;
  margin?: string;
}) {
  const variants = {
    hidden: {
      opacity: 0,
      x: direction === "left" ? -x : direction === "right" ? x : 0,
      y: direction === "up" ? y : 0,
    },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
    },
  };

  const FadeIn = motion[as];

  return (
    <FadeIn
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin }}
      transition={{ duration, delay }}
      variants={variants}
      className={className}
      {...(href ? { href } : {})}
      {...(id ? { id } : {})}
      whileHover={whileHover}
    >
      {children}
    </FadeIn>
  );
}