"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import SafeHtmlRenderer from "../SafeHtmlRenderer";

function MembersInnerPage({ data, id }: any) {
  const [filteredData, setFilteredData] = useState<any>(null);

  useEffect(() => {
    if (!id) return;
    const foundMember = data?.members?.find((d: any) => d?._id === id);
    setFilteredData(foundMember);
    console.log("skmwismkmw", foundMember);
  }, [id, data]);

  return (
    <div className="container m-auto overflow-hidden">
      <main className="min-h-screen">
        <div className="container mx-auto py-10 px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-10">
              <h1 className="text-3xl font-bold text-gray-900 sm:text-4xl">
                {filteredData?.innerTitle}
              </h1>
              <p className="mt-4 text-lg text-gray-600">
                {filteredData?.innerSubTitle}
              </p>
            </div>

            <div className="bg-white/25 shadow-lg rounded-lg overflow-hidden">
              <div className="p-6 sm:p-8">
                <div className="safe prose max-w-none mb-8">
                  <SafeHtmlRenderer
                    htmlContent={filteredData?.innerPageContent}
                  />
                </div>
                <div className="flex md:w-1/2 m-auto rounded-lg bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
                  <Link
                    href={`/memberform/${filteredData?.title
                      .split(" ")
                      .join("-")
                      .toLowerCase()}`}
                    className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change"
                  >
                    <button className="flex items-center will-change">
                      <span className="will-change-transform">
                        {filteredData?.innerBtn}
                      </span>
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default MembersInnerPage;