import { Variants } from "motion";

export const fadeInOut = (duration: number = 0.3, delay = 0): Variants => ({
  initial: {
    opacity: 0,
  },
  animate: {
    opacity: 1,
    transition: {
      duration,
      ease: "easeOut",
    },
  },
  exit: {
    opacity: 0,
    transition: {
      duration,
      ease: "easeIn",
      delay,
    },
  },
});

export const fadeOut = (duration: number = 0.6): Variants => ({
  initial: {
    opacity: 1,
  },
  exit: {
    opacity: 0,
    transition: {
      duration,
      ease: "easeInOut",
    },
  },
});
export const slideUpModal = (delay: number = 0.5): Variants => {
  const modalSlideTransition = {
    type: "tween" as const,
    ease: "circInOut" as const,
  };
  return {
    initial: {
      y: "120%",
    },
    animate: {
      y: 0,
      transition: {
        delay,
        ...modalSlideTransition,
      },
    },
    exit: {
      y: "120%",
      transition: {
        delay: 0,
        ...modalSlideTransition,
      },
    },
  };
};
export const fadeScale = (delay: number = 0.25): Variants => ({
  initial: { scale: 0.75, opacity: 0 },
  animate: {
    scale: 1,
    opacity: 1,
    transition: { duration: 0.25, delay },
  },
  exit: {
    scale: 0.75,
    opacity: 0,
    transition: { duration: 0.25 },
  },
});