import useDevice from '@/core/hooks/useDevice'
import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
import Skeleton from 'react-loading-skeleton'

const FlashSaleSkeleton = () => {
  return (
    <div className='px-4 md:px-0'>
      <TitleSkeleton />
      <div className='my-4'>
        <BannerSkeleton />
      </div>
      <PopularProductSkeleton />
    </div>
  )
}

const TitleSkeleton = () => {
  return (
    <div className='w-full md:w-[36%] flex gap-x-4'>
      <Skeleton containerClassName='block w-1/2' height={24} />
      <div className='w-1/2 flex gap-x-1'>
        <Skeleton height={40} containerClassName='w-full' />
        <Skeleton height={40} containerClassName='w-full' />
        <Skeleton height={40} containerClassName='w-full' />
        <Skeleton height={40} containerClassName='w-full' />
      </div>
    </div>
  )
}

const BannerSkeleton = () => {
  const { isDesktop } = useDevice()
  return <Skeleton duration={1.2} height={isDesktop ? 192 : 48} containerClassName='w-full' />
}

export { FlashSaleSkeleton, TitleSkeleton, BannerSkeleton }