import ProductSlider from '@/lib/product/components/ProductSlider'
import useCategoryHome from '../hooks/useCategoryHome'
import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'

const CategoryHome = ({ id }) => {
  const { categoryHome } = useCategoryHome({ id })

  return (
    <div className='p-4 sm:py-8 relative bg-gray-100 border border-gray-200 min-h-[240px]'>
      {categoryHome?.data?.length > 0 ? (
        <ProductSlider
          products={{
            products: categoryHome.data?.[0].products,
            banner: {
              image: categoryHome.data?.[0].image,
              name: categoryHome.data?.[0].name,
              url: categoryHome.data?.[0].url
            }
          }}
          simpleTitle
          bannerMode
        />
      ) : (
        <PopularProductSkeleton />
      )}
    </div>
  )
}

export default CategoryHome
