import Slider from "react-slick";


const instagramData = [
  { id: 1, image: "/assets/images/home/bottom/1.webp" },
  { id: 2, image: "/assets/images/home/bottom/2.webp" },
  { id: 3, image: "/assets/images/home/bottom/3.webp" },
  { id: 4, image: "/assets/images/home/bottom/4.webp" },
  { id: 5, image: "/assets/images/home/bottom/5.webp" },
];

const InstagramArea = () => {
  return (
    <div className="instagram-area">
      <Slider
        dots={false}
        arrows={false}
        infinite={true}
        speed={500}
        slidesToShow={5}
        slidesToScroll={1}
        autoplay={true}
        autoplaySpeed={2500}
        responsive={[
          { breakpoint: 1400, settings: { slidesToShow: 5 } },
          { breakpoint: 1200, settings: { slidesToShow: 4 } },
          { breakpoint: 992, settings: { slidesToShow: 3 } },
          { breakpoint: 576, settings: { slidesToShow: 3 } },
          { breakpoint: 0, settings: { slidesToShow: 1 } },
        ]}
      >
        {instagramData.map((item, index) => (
          <div
            key={item.id}
            data-aos="fade-up"
            data-aos-delay={index * 50}
            data-aos-duration={1500}
            data-aos-offset={50}
          >
            <div className="instagram-item">
              <img src={item.image} alt={`Instagram ${item.id}`} />
              {/* <a href={item.image}>
            <i className="fab fa-instagram" />
          </a> */}
            </div>
          </div>
        ))}
      </Slider>
    </div>
  );
};

export default InstagramArea;