import SideNav from "@/components/SideNav";
import { fetchCrescentGroupData } from "@/services/crescent-group.service";
import Image from "next/image";
import React, { ReactNode } from "react";

interface BannerData {
  id: number;
  title?: string;
  description?: string;
  cover_image_url?: string;
}

interface NavItem {
  id: string | number;
  title: string;
  shortDescription: string;
}

export default async function CrescentGroupLayout({ children }: { children: ReactNode }) {
  let bannerData: BannerData | undefined;
  let sideNavData: NavItem[] = [];

  try {
    const response = await fetchCrescentGroupData("566997e2-e512-441d-91e3-6d089ad17015");
    bannerData = response?.pagedata;
    sideNavData = response?.pageItemdataWithSubsection ?? [];
  } catch (error) {
    console.error("Error fetching banner data:", error);
  }
  //   console.log(sideNavData, "CCCCCCCCCCCCCCCCCCCCCCCCCCCCC")

  if (!bannerData && sideNavData)
    return <div className="container mx-auto py-8">{children}</div>;

  return (
    <div>
      <div className="relative w-full h-[350px] md:h-[450px] lg:h-[500px] bg-gray-800 overflow-hidden">
        <Image
          src={bannerData?.cover_image_url || "/assets/images/crescent.webp"}
          alt={bannerData?.title || "Banner"}
          fill
          className="object-cover opacity-80"
          priority
        />

        <div className="absolute inset-0 bg-black/40 z-10 flex items-center justify-center">
          <div className="text-center text-white px-4 container">
            <h1 className="pb-0 w-full block text-3xl sm:text-5xl md:text-[60px] leading-[100%] font-normal mb-10">
              {bannerData?.title}
            </h1>
            {bannerData?.description && (
              <div
                className="
            prose 
            prose-invert 
            max-w-none 
            font-thin sm:font-light md:font-light
            text-[18px] sm:text-[20px] md:text-[22px] 
            leading-[150%] 
            font-['Roboto']
            [&_p]:text-[#f4f4ff] 
            [&_p]:m-0 
            [&_p]:mb-[15px] 
            [&_p]:leading-[24px]
          "
                dangerouslySetInnerHTML={{ __html: bannerData.description }}
              />
            )}
          </div>
        </div>
      </div>


      <section className="container mx-auto px-4 py-4 sm:py-12 grid gap-8 md:grid-cols-3">

        <div className="md:col-span-2">{children}</div>


        <aside className="md:col-span-1">
          <SideNav navData={sideNavData} />
        </aside>
      </section>
    </div>
  );
}