"use client"
import React from "react";
import useSWR, { SWRConfig } from 'swr'
import { useEffect, useState } from 'react';
import { ProdukCard } from "@/app/library/card";
import { LoaderJo } from "@/app/component/loader";
const fetcher = (...args) => fetch(...args).then((res) => res.json())

const DaftarPremium = () =>{
  const [count, setCount] = useState(0);
  const { data: dPremium, mutate } = useSWR(`/pages/api/produk?order=uniqid&ascdesc=DESC&limit=24&start=${count}&approval=1&reg=1`, fetcher)

  return <>
  {!dPremium ? 
    <>
      <LoaderJo/>
    </>
    :
    <section className="block mt-10 px-4 md:px-10 my-[16px]">
      <div className="w-full">
        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-5">
          {dPremium ? dPremium.message.map((x, i) => {
            x.key = i;
            return (
              <li className="list-none" key={i}>
                <ProdukCard data={x} type={"premium"} />
              </li>
            )
          }):<></>}
        </div>
        <div className="text-center">
          <button className="p-2 bg-blue-700 text-white rounded mt-10 cursor-pointer"
            onClick={()=>{
              if(count != 0){
                setCount(count-24);
                mutate();
                window.scrollTo(0, 0)
              }
            }}
          >Listing Sebelumnya</button>
          <button className="ml-2 p-2 bg-blue-700 text-white rounded mt-10 cursor-pointer"
            onClick={()=>{
                let cn = dPremium ? dPremium.message.length:0;
                setCount(count+24);
                mutate();
                window.scrollTo(0, 0)
            }}
          >Listing Selanjutnya</button>
        </div>
      </div>
    </section>
  }
  </>
}

export default DaftarPremium;