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'
import Link from '@/core/components/elements/Link/Link'

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

  if (popularProduct.isLoading) return <PopularProductSkeleton />

  return (
    popularProduct.data && (
      <>
        <MobileView>
          <div className='px-4'>
          <div className='font-semibold mb-4 flex justify-between items-center'><p>
              Produk Ready Stock
              </p> 
              <Link
                href='/shop/search?orderBy=stock'
                className=''
              >
                <p className='text-danger-500 font-semibold'>Lihat Semua</p>
                </Link></div>
            <ProductSlider products={popularProduct.data} simpleTitle />
          </div>
        </MobileView>

        <DesktopView>
          <div className='border border-gray_r-6 h-full overflow-auto'>
          <div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10 flex justify-between items-center'>
             <p>
              Produk Ready Stock
              </p> 
              <Link
                href='/shop/search?orderBy=stock'
                className=''
              >
                <p className='text-danger-500 font-semibold'>Lihat Semua</p>
                </Link>
            </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