import { fetchNetworkData } from '@/services/contact-us.service';
import React from 'react';

interface PageData {
  id: number;
  title: string;
  slug: string;
  uuid: string;
  description: string;
}

interface SectionItem {
  id: number;
  title: string;
  shortDescription: string;
}

interface EditReview {
  id: number;
  title: string;
  content: string;
}

interface EditFaq {
  id: number;
  question: string;
  answer: string;
}

interface NetworkApiResponse {
  status: boolean;
  pagedata: PageData;
  pageItemdataWithSubsection: SectionItem[];
  editReviedata: EditReview[];
  editfaqdata: EditFaq[];
}

export default async function LocationPage() {
  let pageData: PageData | null = null;
  let sectionData: SectionItem[] = [];

  try {
    const response: NetworkApiResponse = await fetchNetworkData(
      '701a96f3-4a5b-4fd8-ac27-0e11378e60b3'
    );
    pageData = response?.pagedata || null;
    sectionData = response?.pageItemdataWithSubsection || [];
  } catch (error) {
    console.error('Error fetching network data:', error);
  }

  
  if (!pageData && !sectionData.length) return null;

  return (
    <section className="mx-auto max-w-6xl px-4 ">

      <div className="bg-slate-800 text-[#BCC4C9] text-2xl md:text-[40px] font-[300] py-2 px-6 mb-8">
        {pageData?.title}
      </div>


      <div className="grid grid-cols-1 gap-8">
        {sectionData.length > 0 ? (
          sectionData.map((item) => (
            <div
              key={item.id}
            //   className="bg-white shadow rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <h2 className="inline-block bg-amber-400 text-gray-800 text-xl md:text-[30px] font-bold px-3 py-1 mb-3">
                {item.title}
              </h2>
              <div
                className="text-[16px] leading-relaxed text-gray-700"
                dangerouslySetInnerHTML={{ __html: item.shortDescription || ''}}
              />
            </div>
          ))
        ) : (
          <p className="text-gray-500 col-span-2 text-center">
            No location data available.
          </p>
        )}
      </div>
    </section>
  );
}