'use client'
import React from 'react';
import 'swiper/css';
import 'swiper/css/navigation';
import { useSelector } from 'react-redux';
import { IRootState } from '../../store';



import { FC } from "react";
import { usePathname, useSearchParams, useRouter } from "next/navigation";

interface PaginationProps {
  pageCount: number;
}

interface PaginationArrowProps {
  direction: "left" | "right";
  href: string;
  isDisabled: boolean;
}

const PaginationArrow: FC<PaginationArrowProps> = ({
  direction,
  href,
  isDisabled,
}) => {
  const router = useRouter();
  const isLeft = direction === "left";
  const disabledClassName = isDisabled ? "opacity-50 cursor-not-allowed" : "";
  const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;

  return (
    <button
      onClick={() => router.push(href)}
      className={`bg-gray-100 text-gray-500 hover:bg-gray-200 ${disabledClassName}  text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary`}
      aria-disabled={isDisabled}
      disabled={isDisabled}
    >
      {isRtl ? (isLeft ? '»' : '«') : (isLeft ? '«' : '»')}
    </button>
  );
};

export function PaginationComponent({ pageCount }: Readonly<PaginationProps>) {
    const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl' ? true : false;
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get("page")) || 1;

  const createPageURL = (pageNumber: number | string) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  return (

      <>

<div className="inline-flex justify-center gap-1 ">
  <div
   
    className="inline-flex size-8 w-6   items-center justify-center rounded border border-gray-100 rtl:rotate-180 bg-gradient-to-t from-white/60 to-transparent dark:bg-none "
  >
     <PaginationArrow
            direction="left"
            href={createPageURL(currentPage - 1)}
            isDisabled={currentPage <= 1}
          />
    {/* <span className="sr-only"
     
    
    >Prev Page</span> */}

  </div>

  <div>
    <label htmlFor="PaginationPage" className="sr-only "> Page {currentPage}</label>

    <input
      type="number"
      className="h-8 w-12 rounded border  p-0 text-center text-xs font-medium  [-moz-appearance:_textfield]   [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none bg-gradient-to-t from-white/60 to-transparent dark:bg-none "
   
      value={currentPage}
      id="PaginationPage"
    />
  </div>

  <div
 
    className="inline-flex size-8 w-6 items-center justify-center rounded border border-gray-100 rtl:rotate-180 bg-gradient-to-t from-white/60 to-transparent dark:bg-none "
  >
    <PaginationArrow
            direction="right"
            href={createPageURL(currentPage + 1)}
            isDisabled={currentPage >= pageCount}
          />
  

  </div>
</div>


        </>

  );
}