import { fetchBannerCrescent, fetchBannerData } from "@/services/contact-us.service";
import Image from "next/image";
import React, { ReactNode } from "react";

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

export default async function ContactUsGroupLayout({ children }: { children: ReactNode }) {
  let bannerData: BannerData | undefined;
  let crescentImage: BannerData | undefined;

  try {
    const response = await fetchBannerData("13322c38-1e68-4cd9-a9b1-b369eab7dfdd");
    bannerData = response?.pagedata;
    const res = await fetchBannerCrescent("0dcb09b8-b779-4896-aac1-6e4af842a0d4");
    crescentImage = res?.pagedata;
  } catch (error) {
    console.log("Error fetching banner data:", error);
    return null;
  }


  if (!bannerData || !crescentImage) return <div className="container mx-auto py-8">{children}</div>;
  // console.log(crescentImage, "%%%%%%%%%")
  return (
    <div>
      <div className="relative w-full h-[350px] md:h-[450px] lg:h-[480px] bg-gray-800 overflow-hidden">
        <Image
          src={bannerData?.image || "/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 max-w-2xl">
            <Image
              src={crescentImage?.cover_image_url || "/assets/images/crescent.webp"}
              alt={crescentImage?.title || "Banner"}
              width={1000}
              height={200}
              // fill
             className="invert brightness-0"
              priority
            />
            {bannerData?.description && (
              <div
                className="prose prose-invert max-w-none text-base md:text-lg lg:text-xl font-light drop-shadow-md mt-4"
                dangerouslySetInnerHTML={{ __html: bannerData.description }}
              />
            )}
          </div>
        </div>
      </div>


      <div className="container mx-auto px-4 py-[50px]">{children}</div>
    </div>
  );
}