import SideNav from "@/components/SideNav";
import { fetchCrescentHealthData } from "@/services/crescent-health.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 CrescentHealthCareLayout({ children }: { children: ReactNode }) {
  let bannerData: BannerData | undefined;
  let sideNavData: NavItem[] = [];

  try {
    const response = await fetchCrescentHealthData("0ba2a225-2dc4-4954-9491-b3ae158b1a3c");
    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-[410px] bg-gray-800 overflow-hidden">
        <Image
          src={bannerData?.cover_image_url || "/assets/images/about_the_company.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 max-w-3xl">
            {bannerData?.description && (
              <div
                className="prose prose-invert max-w-none text-lg md:text-xl font-light drop-shadow-md"
                dangerouslySetInnerHTML={{ __html: bannerData.description }}
              />
            )}
          </div>
        </div> */}
      </div>


      <section className="container mx-auto px-4 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>
  );
}