import useDevice from '@/core/hooks/useDevice'
import Skeleton from 'react-loading-skeleton'

const PreferredBrandSkeleton = () => {
  const { isDesktop } = useDevice()

  return (
    <div className='grid grid-cols-4 md:grid-cols-8 gap-x-3'>
      {Array.from({ length: isDesktop ? 8 : 4 }, (_, index) => (
        <Skeleton count={1} height={isDesktop ? 84 : 56} key={index} />
      ))}
    </div>
  )
}

export default PreferredBrandSkeleton