import { fetchSiteData } from '@/services/footer.service';
import Image from 'next/image';
import React from 'react';

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

export default async function page() {
    let siteData: PageData | undefined;

    try {
        const response = await fetchSiteData(
            'e4517d5e-42e4-4874-80ea-a54aa0e6abe2'
        );

        siteData = response?.pagedata;
    } catch (error) {
        console.error('Error fetching associate data:', error);
    }

    if (!siteData) return null;
  
    return (
        <>
            <div className="relative w-full h-[350px] md:h-[450px] lg:h-[480px] overflow-hidden">
                <Image
                    src={siteData?.cover_image_url || "/assets/images/crescent.webp"}
                    alt={siteData?.title || "Banner"}
                    fill
                    className="object-cover opacity-80"
                    priority
                />
            </div>
            <div className="bg-white">
                <div className=" mx-auto sm:px-4 md:px-6 py-12 max-w-4xl">
                    <div className="relative mb-10 text-center">
                        <h1 className="text-center text-[48px] font-[300] mb-4">
                            {siteData.title}
                        </h1>
                    </div>

                    {siteData.description && (
                        <div
                            className="prose prose-lg text-gray-700 leading-relaxed mb-6"
                            dangerouslySetInnerHTML={{ __html: siteData.description }}
                        />
                    )}
                </div>
            </div>
        </>
    );
}