import ProductCardSkeleton from '@/core/components/elements/Skeleton/ProductCardSkeleton'
import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'

const PopularProductSkeleton = () => (
  <>
    <MobileView>
      <div className='grid grid-cols-2 gap-x-3'>
        <ProductCardSkeleton />
        <ProductCardSkeleton />
      </div>
    </MobileView>
    <DesktopView>
      <div className='grid grid-cols-6 gap-x-3'>
        <ProductCardSkeleton />
        <ProductCardSkeleton />
        <ProductCardSkeleton />
        <ProductCardSkeleton />
        <ProductCardSkeleton />
        <ProductCardSkeleton />
      </div>
    </DesktopView>
  </>
)

export default PopularProductSkeleton