"use client";
import { motion, Variants } from "framer-motion";
import { ReactHTML } from "react";

type Iprop = {
  element?: keyof ReactHTML;
  children: React.ReactNode;
  animationType?: "top" | "left" | "bottom" | "right" | "fade";
  duration?: number;
  delay?: number;
  className?: string;
};

const MotionEl = ({
  element = "div",
  children,
  duration = 2,
  delay = 0,
  animationType = "top",
  className = "",
}: Iprop) => {
  const Element = motion[element as keyof typeof motion];

  // init of options
  let options: Variants = {
    offscreen: {
      y: 200,
    },
    onscreen: {
      y: 0,
      transition: {
        type: "spring",
        bounce: 0.4,
        duration: duration,
        delay: delay,
      },
    },
  };

  // type of animation
  switch (animationType) {
    case "top":
      options = {
                offscreen: {
                  y: -200,
                },
                onscreen: {
                  y: 0,
                  transition: {
                    type: "spring",
                    bounce: 0.4,
                    duration: duration,
                    delay: delay
                  },
                },
              };
      break;
    case "bottom":
      options = {
                offscreen: {
                  y: 200,
                },
                onscreen: {
                  y: 0,
                  transition: {
                    type: "spring",
                    bounce: 0.4,
                    duration: duration,
                    delay: delay
                  },
                },
              };
      break;
    case "left":
      options = {
                offscreen: {
                  x: 200,
                },
                onscreen: {
                  x: 0,
                  transition: {
                    type: "spring",
                    bounce: 0.4,
                    duration: duration,
                    delay: delay
                  },
                },
              };
      break;
    case "right":
      options = {
                offscreen: {
                  x: -200,
                },
                onscreen: {
                  x: 0,
                  transition: {
                    type: "spring",
                    bounce: 0.4,
                    duration: duration,
                  },
                },
              };
      break;
    case "fade":
      options = {
                offscreen: {
                  opacity: 0,
                },
                onscreen: {
                  opacity: 1,
                  transition: {
                    type: "spring",
                    bounce: 0.4,
                    duration: duration,
                    delay: delay
                  },
                },
              };
      break;
    default:
      break;
  }

  return (
    <Element
      className={className}
      initial="offscreen"
      whileInView="onscreen"
      viewport={{ once: true, amount: 0.3 }}
      variants={options}
    >
      {children}
    </Element>
  );
};

export default MotionEl;



// "use client";
// import { motion, Variants } from "framer-motion";
// import { ReactHTML } from "react";

// type Iprop = {
//   element?: keyof ReactHTML;
//   children: React.ReactNode;
//   animationType?: "top" | "left" | "bottom" | "right" | "fade";
//   duration?: number;
//   delay?: number;
//   className?: string;
// };

// const MotionEl = ({
//   element = "div",
//   children,
//   duration = 2,
//   delay = 0,
//   animationType = "top",
//   className = "",
// }: Iprop) => {
//   const Element = motion[element as keyof typeof motion];

//   // init of options
//   let options: Variants = {
//     offscreen: {
//       y: 200,
//     },
//     onscreen: {
//       y: 50,
//       transition: {
//         type: "spring",
//         bounce: 0.4,
//         duration: duration,
//         delay: delay
//       },
//     },
//   };

//   // type of animation
//   switch (animationType) {
//     case "top":
//       options = {
//         offscreen: {
//           y: -200,
//         },
//         onscreen: {
//           y: 0,
//           transition: {
//             type: "spring",
//             bounce: 0.4,
//             duration: duration,
//             delay: delay
//           },
//         },
//       };
//       break;
//     case "bottom":
//       options = {
//         offscreen: {
//           y: 200,
//         },
//         onscreen: {
//           y: 0,
//           transition: {
//             type: "spring",
//             bounce: 0.4,
//             duration: duration,
//             delay: delay
//           },
//         },
//       };
//       break;
//     case "left":
//       options = {
//         offscreen: {
//           x: 200,
//         },
//         onscreen: {
//           x: 0,
//           transition: {
//             type: "spring",
//             bounce: 0.4,
//             duration: duration,
//             delay: delay
//           },
//         },
//       };
//       break;
//     case "right":
//       options = {
//         offscreen: {
//           x: -200,
//         },
//         onscreen: {
//           x: 0,
//           transition: {
//             type: "spring",
//             bounce: 0.4,
//             duration: duration,
//           },
//         },
//       };
//       break;
//     case "fade":
//       options = {
//         offscreen: {
//           opacity: 0,
//         },
//         onscreen: {
//           opacity: 1,
//           transition: {
//             type: "spring",
//             bounce: 0.4,
//             duration: duration,
//             delay: delay
//           },
//         },
//       };

//       break;
//     default:
//       break;
//   }

//   return (
//     <Element
//       className={className}
//       initial="offscreen"
//       whileInView="onscreen"
//       viewport={{ once: true, amount: 0.8 }}
//     >
//       <motion.div variants={options} className="">
//         {children}
//       </motion.div>
//     </Element>
//   );
// };

// export default MotionEl;