import { popularProductApi } from '@/api/productApi'
import MobileView from '@/core/components/views/MobileView'
import ProductSlider from '@/lib/product/components/ProductSlider'
import { useQuery } from 'react-query'
import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton'
import DesktopView from '@/core/components/views/DesktopView'
import ProductCard from '@/lib/product/components/ProductCard'

const PopularProduct = () => {
  const popularProduct = useQuery('popularProduct', popularProductApi())

  if (popularProduct.isLoading) return <PopularProductSkeleton />

  return (
    popularProduct.data && (
      <>
        <MobileView>
          <div className='px-4'>
            <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
            <ProductSlider products={popularProduct.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'>
              {popularProduct.data &&
                popularProduct.data.products.map((product) => (
                  <div className='py-2' key={product.id}>
                    <ProductCard product={product} variant='horizontal' />
                  </div>
                ))}
            </div>
          </div>
        </DesktopView>
      </>
    )
  )
}

export default PopularProduct