import SideNav from "@/components/SideNav";
import { fetchBannerData } from "@/services/contact-us.service";
import React from "react";

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

export default async function LocationGroupLayout({ children }: { children: React.ReactNode }) {
    let navData: NavItem[] = [];

    try {
        const response = await fetchBannerData(
            "13322c38-1e68-4cd9-a9b1-b369eab7dfdd"
        );
        navData = response?.pageItemdataWithSubsection ?? [];
    } catch (error) {
        console.error("Error fetching nav data:", error);
    }


    if (!navData.length) {
        return <>{children}</>;
    }

    // console.log(navData, "NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN")


    return (
        <section className="mx-auto max-w-6xl text-lg leading-relaxed">
            <div className="container grid gap-12 md:gap-4 md:grid-cols-3">
                <div className="col-span-2 border-r border-gray-300">{children}</div>
                <aside className="flex flex-col md:flex-row md:items-start md:justify-end">
                    <div className="hidden md:block h-full mx-8" />
                    <SideNav navData={navData} />
                </aside>
            </div>
        </section>
    );
}