/* eslint-disable @next/next/no-img-element */
import { useInView } from 'react-intersection-observer';
import { motion, useAnimation } from 'framer-motion';
import { useLayoutEffect } from 'react';
import { LogosFormat } from '../../../models/common';
import styles from '../PartnerRelationships.module.scss';

interface Props {
  logo: LogosFormat;
}

const variants = {
  enter: {
    opacity: 1,
    y: '0px',
    transition: {
      duration: 0.8,
      ease: [0.19, 0.76, 0.05, 1],
    },
  },
  initial: {
    opacity: 0,
    y: '100px',
    transition: {
      duration: 0.8,
      ease: [1, 0.05, 0.76, 0.19],
    },
  },
};

const PartnerRelationshipsItem = (props: Props) => {
  const { logo } = props;
  const controls = useAnimation();
  const [ref, inView] = useInView();

  useLayoutEffect(() => {
    if (inView) controls.start('enter');
    else controls.start('initial');
  }, [ref, inView, controls]);

  return (
    <motion.div
      className={styles.logo}
      initial={'initial'}
      variants={variants}
      animate={controls}
      ref={ref}
    >
      <img src={logo?.img?.src} alt={logo?.img?.alt || ''} />
    </motion.div>
  );
};

export default PartnerRelationshipsItem;