"use client";

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

export const pageEase = [0.16, 1, 0.3, 1] as const;

type PageEnterProps = {
  children: ReactNode;
  className?: string;
  delay?: number;
  y?: number;
} & Omit<HTMLMotionProps<"div">, "children" | "initial" | "animate" | "transition">;

export function PageEnter({
  children,
  className,
  delay = 0,
  y = 12,
  ...props
}: PageEnterProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, delay, ease: pageEase }}
      className={className}
      {...props}
    >
      {children}
    </motion.div>
  );
}

export function PageTextEnter({
  children,
  className,
  delay = 0,
  as = "div",
}: {
  children: ReactNode;
  className?: string;
  delay?: number;
  as?: "div" | "h1" | "p";
}) {
  const Component = motion[as];

  return (
    <Component
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, delay, ease: pageEase }}
      className={className}
    >
      {children}
    </Component>
  );
}