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

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

interface PolicyData {
    id: number;
    title: string;
}

export default async function Page() {
    let policyData: PageData | undefined;
    let policiesList: PolicyData[] = [];

    try {
        const response = await fetchSiteData(
            '5262c1f3-7596-40c7-8a34-d53a70bd6fe0'
        );

        policyData = response?.pagedata;
        policiesList = response?.pageItemdataWithSubsection || [];
    } catch (error) {
        console.error('Error fetching policy data:', error);
    }

    if (!policyData) return null;

    

    const staticLinks: Record<string, string> = {
        'CSR Policy': '/assets/images/CSR-Policy.pdf',
        'Policy on Prevention of Sexual Harassment at Workplace':
            '/assets/images/Policy-on-Prevention-of-Sexual-Harassment-at-Workplace.pdf',
        'Whistle Blower policy':
            '/assets/images/Whistle-Blower-policy.pdf',
    };

    return (
        <>

            <div className="relative w-full h-[350px] md:h-[450px] lg:h-[700px] bg-gray-900 overflow-hidden">
                <Image
                    src={policyData?.cover_image_url || '/assets/images/crescent.webp'}
                    alt={policyData?.title || 'Policies'}
                    fill
                    className="object-cover opacity-80"
                    priority
                />
                {/* <div className="absolute inset-0 flex items-center justify-center">
          <h1 className="text-white text-3xl md:text-5xl font-semibold drop-shadow-lg">
            {policyData?.title || 'Policies'}
          </h1>
        </div> */}
            </div>


            <section className="bg-white py-20">
                <div className="max-w-5xl mx-auto px-6 md:px-10">
                    <ul className="space-y-10">
                        {policiesList.map((item) => {
                            const href = staticLinks[item.title] || '#';
                            return (
                                <li key={item.id}>
                                    <Link
                                        href={href}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-green-600 text-xl font-medium hover:text-[#F6A623] transition-colors duration-300"
                                    >
                                        {item.title}
                                    </Link>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </section>
        </>
    );
}