import useDevice from '@/core/hooks/useDevice';
import classNames from 'classnames';
import { Skeleton } from '@chakra-ui/react';

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

  const deviceClassName = {
    '!h-[36px]': isDesktop,
    'h-2.5': isMobile,
  };
  const combinedClassName = classNames(deviceClassName);

  return <Skeleton className={combinedClassName} />;
};

export { TopBannerSkeleton };