import React from "react";
import SlideInItem from "./slideInItem";

interface OwnProps {}

type Props = OwnProps;

const list = [
  { id: 1, bg: "red" },
  { id: 2, bg: "blue" },
  { id: 3, bg: "green" },
  { id: 4, bg: "yellowgreen" },
  { id: 5, bg: "orange" },
  { id: 6, bg: "pink" },
  { id: 7, bg: "antiquewhite" },
  { id: 8, bg: "darkseagreen" },
  { id: 9, bg: "purple" },
  { id: 10, bg: "red" },
  { id: 11, bg: "black" }
];
const Index: React.FC<Props> = (props) => {
  const map = new WeakMap();
  const ob = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        const animation = map.get(entry.target);
        if (animation) {
          animation.play();
          ob.unobserve(entry.target);
        }
      }
    }
  });
  return (
    <>
      {list.map((item, index) => {
        return <SlideInItem key={index} item={item} ob={ob} map={map}></SlideInItem>;
      })}
    </>
  );
};

export default Index;
