import { useEffect, useState } from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper";
import Header from "../components/Header";
import { getOdoo } from "../helpers/apiOdoo";
import "react-lazy-load-image-component/src/effects/blur.css";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";

export default function Home() {
  const [heroBanners, setHeroBanners] = useState([]);
  const [manufactures, setManufactures] = useState([]);

  useEffect(() => {
    setHeroBanners([]);
    const getHeroBanners = async () => {
      const dataHeroBanners = await getOdoo(`/api/v1/banner?type=index-a-1`);
      setHeroBanners(dataHeroBanners);
    }
    getHeroBanners();

    setManufactures([]);
    const getManufactures = async () => {
      const dataManufactures = await getOdoo(`/api/v1/manufacture?level=prioritas`);
      setManufactures(dataManufactures);
    }
    getManufactures();
  }, []);

  return (
    <>
      <Header />
      <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
        {
          heroBanners?.map((banner, index) => (
            <SwiperSlide key={index}>
              <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
            </SwiperSlide>
          ))
        }
      </Swiper>
      <div className="mt-5 px-4">
        <h2 className="text-gray-900 font-medium mb-3">Brand Pilihan</h2>
        <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
          {
            manufactures?.manufactures?.map((manufacture, index) => (
              <SwiperSlide key={index}>
                <div className="border border-gray-300 p-2 rounded h-full">
                  <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
                </div>
              </SwiperSlide>
            ))
          }
        </Swiper>
      </div>
    </>
  )
}