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 ? (
        <ProductSlider
          products={{
            products: categoryHome?.data?.products,
            banner: {
              image: categoryHome?.data?.image,
              name: categoryHome?.data?.name,
              url: categoryHome?.data?.url
            }
          }}
          simpleTitle
          bannerMode
        />
      ) : (
        <PopularProductSkeleton />
      )}
    </div>
  )
}

export default CategoryHome