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

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

  const deviceClassName = {
    'min-h-[460px]': isDesktop,
    'min-h-[230px]': isMobile
  }
  const defaultClassName = 'h-full'
  const combinedClassName = classNames(defaultClassName, deviceClassName)

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

export { HeroBannerSkeleton }