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