"use client";

import Footer from "@comp/Footer/page";
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
import Cart from "@comp/Pages/BlogComponents/Cart";
import PaginationCategoory from "@comp/PaginationCategoory/page";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import PersianNumber from "@plug/PersianNumber";
import React from "react";

const BlogsData = ({ dataCaetgories, 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}`);
  };

  // console.log("dataCaetgories", dataCaetgories);

  return (
    <div>
      <div className="bg-contact-us pb-10 ">
        <div className=" lg:pb-20">
          <NavbarTransparent />

          <div className="relative">
            <svg
              class="absolute hidden lg:block ltr:right-80 ltr:left-auto left-80 top-20 ltr:mr-6 ltr:ml-0 ml-6 z-10  opacity-10 mt-[110px]"
              width="38"
              height="51"
              viewBox="0 0 38 50"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M36.7412 1.94352L17.4742 6.5023L22.033 25.7693L2.76602 30.3281L7.3248 49.5951"
                stroke="white"
                stroke-width="5"
              ></path>
            </svg>
          </div>

          <div className="xs:mt-[50px] lg:mt-[100px] px-20  flex rtl justify-center ">
            <div className=" ">
              <h1 className="text-white font-bold text-right xs:text-[20px] lg:text-[40px]">
                {!!searchParamsCurrentId
                  ? data.blogs[0].categoryName
                  : " مجله حامیان عدالت"}
              </h1>
            </div>
          </div>
        </div>
      </div>

      <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 rtl mt-10 ltr">
          <div className="lg:col-span-3 rtl">
            <div className="grid xs:grid-cold-1 md:grid-cols-3 gap-7 rtl ">
              {data?.blogs?.map((e, index) => (
                <Cart
                  categoryName={e.categoryName}
                  title={e.title}
                  mainImage={e.mainImage}
                  slug={e.slug}
                  id={e.id}
                  key={index}
                />
              ))}
            </div>

            <div className="mt-20">
              <PaginationCategoory totalPage={data?.pager} />
            </div>
          </div>
          <div className="bg-white shadow rounded-2xl p-5 relative h-fit rtl">
            <h3 className="text-center font-medium mb-5"> دسته بندی ها</h3>

            <div>
              {dataCaetgories?.map((e, index) => (
                <div onClick={() => handleGoCategories(e.id)} key={index}>
                  <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;