import React from "react";

import { fetchProductData } from "@/services/crescent-group.service";
import { ProductTable } from "@/components/ProductTable";

interface PageData {
  id: number;
  title: string;
  slug: string;
  description: string;
}

interface ProductItem {
  id: number;
  title: string;
  shortDescription: string;
  longDescription: string;
  sequence: number;
  subsections: Array<{ id: number; title: string; description: string }>;
}

export default async function Page() {
  let pageData: PageData | null = null;
  let productData: ProductItem[] = [];

  try {
    const response = await fetchProductData(
      "8bc69506-b362-4e37-8e04-79503551f99b"
    );
    pageData = response?.pagedata;
    productData = response?.pageItemdataWithSubsection || [];
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  // console.log(productData,"PPPPPPPPPPPPPPPPPPPPPPPP")

  return (
    <div className="mx-auto max-w-6xl text-justify text-lg leading-relaxed py-0">
              <h1 className="text-[28px] md:text-36px font-light text-gray-800 mb-5 md:mb-8">
                {pageData?.title}
              </h1>

              {/* Render Each Section Dynamically */}
              {productData?.map((section) => (
                <section key={section.id} className="mb-12">
                  <h2 className="text-[26px] md:text-[32px] font-semibold text-gray-700 mb-3">
                    {section.title}
                  </h2>

                  {/* Render table client-side */}
                  {section.shortDescription && (
                    <ProductTable html={section.shortDescription} />
                  )}

                  {/* Subsections if any */}
                  {section.subsections?.length > 0 && (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 mt-6">
                      {section.subsections.map((sub) => (
                        <div key={sub.id}>
                          <div className="bg-blue-50 p-3 mb-4">
                            <h3 className="text-lg font-semibold text-gray-800">
                              {sub.title}
                            </h3>
                          </div>
                          <div
                            className="prose prose-blue max-w-none text-gray-700"
                            dangerouslySetInnerHTML={{
                              __html: sub.description || "",
                            }}
                          />
                        </div>
                      ))}
                    </div>
                  )}
                </section>
              ))}
            
    </div>
  );
}