import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import {getAssetsUrl} from 'utils/utils';

const SwiperPointer = ({ name, thumb, type }) => {
  const [isShow, setIsShow] = useState(false);
  const thumbsRef = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setIsShow(true);
      }
    });
    io.observe(thumbsRef.current);
  }, []);
  return (
    <div className={styles.thumb} ref={thumbsRef}>
      {isShow ? (
        <img className={styles.img} src={type === 0 ? thumb : getAssetsUrl(`${thumb}`)} alt="" />
      ) : (
        <div className={styles.img} />
      )}
      <div className={styles.title}>{name}</div>
    </div>
  );
};

export default SwiperPointer;
