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

interface PrincipalData {
    id: number;
    title: string;
    description?: string;
    cover_image_url?: string;
}

interface PrincipalSubItem {
    id: number;
    title: string;
    image?: string;
    alt?: string;
}

interface PrincipalResponse {
    pageData?: PrincipalData;
    pageItemdataWithSubsection?: PrincipalSubItem[];
}

export default async function PrincipalPage() {
    let principalData: PrincipalData | undefined;
    let principalSubData: PrincipalSubItem[] = [];

    try {
        const response: PrincipalResponse = await fetchPrincipalData(
            '7e8c711e-afc4-4c96-8626-f03ac20942c2'
        );
        principalData = response?.pageData;
        principalSubData = response?.pageItemdataWithSubsection ?? [];
    } catch (error) {
        console.error('Error fetching principal data:', error);
    }


    if (!principalData && principalSubData.length === 0) return null;

    return (
        <div>

            <div className="relative w-full h-[300px] md:h-[420px]">
                <Image
                    src={principalData?.cover_image_url || '/assets/images/principals_suppliers.webp'}
                    alt={principalData?.title || 'Principals & Suppliers'}
                    fill
                    className="absolute top-0 left-0 w-full h-full object-cover"
                />
                <div className="bg-black opacity-30 absolute w-full h-[300px] md:h-[420px]"></div>
            </div>


            <div className="container mx-auto px-4 md:px-6 py-12 max-w-5xl">
                <h1 className="text-[48px] leading-10 font-light text-left mb-12">
                    {principalData?.title || 'Principals & Suppliers'}
                </h1>

                {principalSubData.length > 0 && (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {principalSubData.map((supplier) => (
                            <div
                                key={supplier.id}
                                className="flex flex-col md:flex-row items-center pb-2 md:pb-6 border-b border-gray-200 principle-left-border"
                            >

                                <div className="w-24 h-24 flex-shrink-0 relative">
                                    {supplier.image ? (
                                        <Image
                                            src={supplier.image}
                                            alt={supplier.alt || supplier.title}
                                            fill
                                            className="absolute top-0 left-0 w-full h-full object-contain"
                                        />
                                    ) : (
                                        <div className="w-full h-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
                                            No Image
                                        </div>
                                    )}
                                </div>


                                <div className="flex-1 pl-4 mt-5 md:mt-0">
                                    <p className="font-semibold leading-snug tracking-normal text-[16px] text-center md:text-left">
                                        {supplier.title}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}