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={8}
          freeMode 
        >
          { preferredBrands.data?.manufactures.map((brand) => (
            <SwiperSlide key={brand.id}>
              <BrandCard brand={brand} />
            </SwiperSlide>
          )) }
        </Swiper>
      ) }
    </div>
  )
}

export default PreferredBrand