import { Swiper, SwiperSlide } from 'swiper/react'
import usePreferredBrand from '../hooks/usePreferredBrand'
import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
import BrandCard from '@/lib/brand/components/BrandCard'

const PreferredBrand = () => {
  const { preferredBrands } = usePreferredBrand()

  return (
    <div className='px-4'>
      <div className='font-medium mb-4'>Brand Pilihan</div>
      {preferredBrands.isLoading && <PreferredBrandSkeleton />}
      {!preferredBrands.isLoading && (
        <Swiper
          slidesPerView={3.5}
          spaceBetween={12}
          freeMode
        >
          {preferredBrands.data?.manufactures.map((brand) => (
            <SwiperSlide key={brand.id}>
              <BrandCard brand={brand} />
            </SwiperSlide>
          ))}
        </Swiper>
      )}
    </div>
  )
}

export default PreferredBrand