import useBrand from "../hooks/useBrand"
import Image from "@/core/components/elements/Image/Image"

import { Swiper, SwiperSlide } from "swiper/react"
import { Pagination, Autoplay } from "swiper"
import "swiper/css"
import "swiper/css/pagination"
import "swiper/css/autoplay"
import Divider from "@/core/components/elements/Divider/Divider"
import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton"

const swiperBanner = {
  pagination: { dynamicBullets: true },
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  modules: [Pagination, Autoplay]
}

const Brand = ({ id }) => {
  const { brand } = useBrand({ id })
  
  return (
    <>
      <div className="min-h-[150px]">
        { brand.isLoading && <ImageSkeleton /> }
        { brand.data && (
          <>
            <Swiper
              slidesPerView={1}
              pagination={swiperBanner.pagination} 
              modules={swiperBanner.modules}
              autoplay={swiperBanner.autoplay}
              className="border-b border-gray_r-6"
            >
              { brand.data?.banners?.map((banner, index) => (
                <SwiperSlide key={index}>
                  <Image 
                    src={banner}
                    alt={`Brand ${brand.data?.name} - Indoteknik`}
                    className="w-full h-auto"
                  />
                </SwiperSlide>
              )) }
            </Swiper>
            <div className="p-4">
              <div className="text-caption-1 text-gray_r-11 mb-2">Produk dari brand:</div>
              { brand?.data?.logo && (
                <Image 
                  src={brand?.data?.logo} 
                  alt={brand?.data?.name} 
                  className="w-32 p-2 border borde-gray_r-6 rounded"
                />
              ) }
              { !brand?.data?.logo && (
                <div className="bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit">
                  { brand?.data?.name }
                </div>
              ) }
            </div>
          </>
        ) }
      </div>
      <Divider />
    </>
  )
}

export default Brand