"use client";

import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import PersianNumber from "plugins/PersianNumber";
import React from "react";
import Cart from "../BlogComponents/Cart";
import PaginationBlogs from "../BlogComponents/PaginationBlogs";

const BlogsData = ({ dataCaetgories, data }) => {
  console.log("data", data);
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const router = useRouter();

  const searchParamsCurrentId = searchParams.get("blogCategoryId");
  const handleGoCategories = (id) => {
    // CTX.setIsChecked(!isChecked);
    const params = new URLSearchParams(searchParams.toString());

    params.set("blogCategoryId", id);

    params.set("page", "0");
    router.push(`${pathname}?${params}`);
  };

  return (
    <div>
      <Navbar />

      <div className="xs:px-3 md:px-5 md:container md:mx-auto mb-10">
        <div className="grid xs:grid-cold-1 md:grid-cols-4 gap-7 ltr mt-10">
          <div className="xs:xol-span-1 lg:col-span-3">
            <div className="grid xs:grid-cold-1 md:grid-cols-3 gap-7 rtl ">
              {data?.blogs?.map((e) => (
                <Cart
                  categoryName={e.categoryName}
                  title={e.title}
                  mainImage={e.mainImage}
                  slug={e.slug}
                  id={e.id}
                  summery={e.summery}
                />
              ))}
            </div>

            <div className="mt-20">
              <PaginationBlogs totalPage={data?.pager} />
            </div>
          </div>

          <div className="bg-gray-100  rounded-2xl p-5 relative h-fit rtl xs:w-full">
            <h3 className="text-center font-medium mb-5"> دسته بندی ها</h3>

            <div>
              {dataCaetgories?.map((e) => (
                <div onClick={() => handleGoCategories(e.id)}>
                  <div className="flex p-2">
                    <div className="w-3 h-3 rounded-full bg-secondary-900 mt-1 ml-2"></div>
                    <p className="mb-0"> {e.name}</p>
                    <small className="text-sm mx-2 mt-[2px]">
                      (
                      <PersianNumber
                        number={e.blogCount}
                        style="text-primary-900 "
                      />
                      )
                    </small>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default BlogsData;