"use client";

import React, { FunctionComponent, ReactNode } from "react";

import { motion } from "framer-motion";

const slideInAnimation = {
  hidden: { opacity: 0, x: "-100%" },
  visible: { opacity: 1, x: "0%" },
};

interface Props {
  children: ReactNode;
}

export const SlideIn: FunctionComponent<Props> = ({ children }) => {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={slideInAnimation}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  );
};