import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import Skeleton from 'react-loading-skeleton'

const PopularProductSkeleton = () => {
  return (
    <>
      <MobileView>
        <div className='px-4'>
          <Skeleton count={1} className='!w-36 h-8' />
          <Skeleton count={2} className='h-64' containerClassName='flex gap-x-2 mt-4' />
        </div>
      </MobileView>

      <DesktopView>
        <Skeleton count={1} className='h-full' />
      </DesktopView>
    </>
  )
}

export { PopularProductSkeleton }