import usePopularProduct from '../hooks/usePopularProduct'
import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'
import ProductSlider from '@/lib/product/components/ProductSlider'
import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import ProductCard from '@/lib/product/components/ProductCard'

const PopularProduct = () => {
  const { popularProducts } = usePopularProduct()

  return (
    <>
      <MobileView>
        <div className='px-4'>
          <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
          {popularProducts.isLoading && <PopularProductSkeleton />}
          {!popularProducts.isLoading && (
            <ProductSlider
              products={popularProducts.data}
              simpleTitle
            />
          )}
        </div>
      </MobileView>

      <DesktopView>
        <div className='border border-gray_r-6 h-full overflow-auto'>
          <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
            Produk Banyak Dilihat
          </div>
          <div className='h-full divide-y divide-gray_r-6'>
            {popularProducts.data &&
              popularProducts.data.products.map((product) => (
                <div
                  className='py-2'
                  key={product.id}
                >
                  <ProductCard
                    product={product}
                    variant='horizontal'
                  />
                </div>
              ))}
          </div>
        </div>
      </DesktopView>
    </>
  )
}

export default PopularProduct