import { fetchAboutData } from "@/services/about-us.service";
import Image from "next/image";
import React from "react";

interface AboutUsLayoutProps {
  children: React.ReactNode;
}

export default async function AboutUsLayout({ children }: AboutUsLayoutProps) {
  let aboutData: { title?: string; cover_image_url?: string } | null = null;

  try {
    const response = await fetchAboutData("6fd6c826-493b-48e9-937b-08fa48dc9622");
    aboutData = response?.pagedata ?? null;
  } catch (error) {
    console.log("Error fetching about data:", error);
    return null;
  }

  if(!aboutData) return null;

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

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