"use client";

import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import "../../BlogComponents/styleBlog.css";
import Footer from "@comp/Footer/page";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import { revalidatePath } from "next/cache";

const BlogData = ({ data }) => {
  // const [h2Tags, setH2Tags] = useState([]);
  const router = useRouter();
  const path = usePathname();
  useEffect(() => {
    console.log("path", path);

    router.refresh();
  }, []);

  // const extractH2Tags = (htmlContent) => {
  //   const div = document.createElement("div");
  //   div.innerHTML = htmlContent;
  //   const h2Elements = div.querySelectorAll("h2");
  //   const h2TagsArray = Array.from(h2Elements).map((h2) => h2.innerHTML);
  //   setH2Tags(h2TagsArray);
  // };

  const removeTextNode = () => {
    let children = document.getElementById("blog-content").childNodes;
    children.forEach((c) => {
      console.log(c.nodeType);
      c.nodeType === Node.TEXT_NODE && c.remove();
    });
  };

  useEffect(() => {
    const interval = setInterval(() => {
      let children = document.getElementById("blog-content").childNodes;
      console.log("Array.from(children)", Array.from(children));
      const cf = Array.from(children).filter((c) => {
        return c.nodeType === Node.TEXT_NODE && c.remove();
      });
      if (cf.length > 0) {
        removeTextNode();
      } else {
        stop();
      }
    }, 1000);
    const stop = () => {
      clearInterval(interval);
    };
    // extractH2Tags(data.content);

    return () => {
      clearInterval(interval);
    };
  }, [data.content]);
  // console.log(data);
  // console.log(h2Tags);
  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-center xs:text-[20px] lg:text-[40px]">
                {data.title}
              </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-cols-1 lg:grid-cols-4 gap-7  ltr">
          <div className="lg:col-span-3 mt-10 rtl">
            <div>
              {/* <Image
                src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${mainImage}`}
                width={500}
                height={500}
                className="w-full h-[200px] object-cover"
              /> */}
            </div>
            <div
              id="blog-content"
              dangerouslySetInnerHTML={{ __html: data.content }}
            />
          </div>
          <div className=" mt-10 rtl ">
            <div className="shadow p-4 rounded-2xl overflow-hidden  sticky top-[110px]">
              <ul class="background">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <h2 className="!m-0 text-white  text-3xl z-10 relative text-center">
                تماس فوری{"   "}
                <small className="text-green-300  text-3xl">رایگان</small>
              </h2>

              <p className="mb-0 opacity-50 text-white text-center ">
                با وکیل های پایه یک دادگستری
              </p>

              <div className="flex justify-start z-0 ">
                <div className="absolute mr-[-45px] mt-[100px]">
                  <div className="w-[150px]  h-1 border-t-2 border-dashed rotate-90 opacity-50"></div>
                </div>
              </div>
              <div className="mt-5 z-10 relative">
                <div className="flex mr-5 mt-3">
                  <div className="w-4 h-4 rounded-full bg-white mt-1"></div>
                  <p className="mb-0 text-white mx-2 font-medium">
                    {" "}
                    وکیل پایه یک ملکی
                  </p>
                </div>

                <div className="flex mr-5 mt-3">
                  <div className="w-4 h-4 rounded-full bg-white mt-1"></div>
                  <p className="mb-0 text-white mx-2 font-medium">
                    {" "}
                    وکیل پایه یک خانواده
                  </p>
                </div>
                <div className="flex mr-5 mt-3">
                  <div className="w-4 h-4 rounded-full bg-white mt-1"></div>
                  <p className="mb-0 text-white mx-2 font-medium">
                    {" "}
                    وکیل پایه یک کیفری
                  </p>
                </div>
                <div className="flex mr-5 mt-3">
                  <div className="w-4 h-4 rounded-full bg-white mt-1"></div>
                  <p className="mb-0 text-white mx-2 font-medium">
                    {" "}
                    وکیل پایه دعاوی مالی
                  </p>
                </div>

                <div className="flex mr-5 mt-3">
                  <div className="w-4 h-4 rounded-full bg-white mt-1"></div>
                  <p className="mb-0 text-white mx-2 font-medium">
                    {" "}
                    وکیل پایه دعاوی تجاری
                  </p>
                </div>
              </div>

              <div className="mt-6">
                {" "}
                <p className="mb-0 opacity-70 text-white">
                  با 10 خط ویژه از{" "}
                  <small className="font-bold text-base">شنبه</small> تا{" "}
                  <small className="font-bold text-base">چهارشنبه</small>{" "}
                  پاسخگوی شما هستیم
                </p>
              </div>

              <div className="relative mt-5">
                <a href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
                  <button className="btn btn-light rounded-full  w-full">
                    تماس فوری
                  </button>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default BlogData;