import { fetchIsoData } from '@/services/crescent-group.service';
import Image from 'next/image';
import React from 'react';


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

type IsoItem = {
  id: number;
  title: string;
  image?: string;
  description?: string;
};

export default async function Page() {
  let pageData: PageData | null = null;
  let isoData: IsoItem[] = [];

  try {
    const response = await fetchIsoData("96e1256e-1e01-46b7-97c9-2c6aeb8228bc");
    pageData = response?.pagedata ?? null;
    isoData = response?.pageItemdataWithSubsection ?? [];
  } catch (error) {
    console.error("Error fetching ISO data:", error);
  }

  if (!pageData) {
    return (
      <section className="mx-auto max-w-6xl text-center py-20">
        <h2 className="text-2xl font-semibold text-gray-600">
          No ISO data available
        </h2>
      </section>
    );
  }

  return (
    <section className="mx-auto max-w-7xl px-4 py-12">
      {/* Page Title */}
      <h2 className="text-3xl md:text-4xl mb-12">
        {pageData.title}
      </h2>

      {/* Certificates Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 justify-items-center">
        {isoData.length > 0 ? (
          isoData.map((item) => (
            <div key={item.id} className="flex flex-col items-center">
              <Image
                src={item.image || "/assets/images/ISO_1.jpg"}
                alt={item.title}
                width={400}
                height={550}
                className="object-contain h-auto shadow-lg rounded"
              />
              <h3 className="text-[32px] font-bold text-center mt-4">
                {item.title}
              </h3>
            </div>
          ))
        ) : (
          <p className="text-gray-600 text-center w-full">
            No ISO certificates available.
          </p>
        )}
      </div>
    </section>
  );
}