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

const TopBannerSkeleton = () => {
  const { isDesktop, isMobile } = useDevice()

  const deviceClassName = {
    'h-10': isDesktop,
    'h-2.5': isMobile
  }
  const combinedClassName = classNames(deviceClassName)

  return (
    <Skeleton className={combinedClassName} count={1} containerClassName='w-full h-full block' />
  )
}

export { TopBannerSkeleton }