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

const MediaNewsSkeleton = () => {
  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
          key={index}
          count={1}
          height={isDesktop ? 84 : 56}
          className="rounded-lg"
        />
      ))}
    </div>
  )
}

export default MediaNewsSkeleton