import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";

import Footer from "@/components/common/Footer";

import MainBg from "@/images/main-bg.webp";
import { getSiteSettings } from "@/lib/getSiteSettings";
import AboutFooterText from "@/components/frontend/pages/about/AboutFooterText";
import Banner from "@/components/frontend/pages/history/Banner";
import GalleryDetail, {
  Album,
} from "@/components/frontend/pages/history/GalleryDetail";

interface PageProps {
  params: Promise<{
    slug: string;
  }>;
}

const Page = async ({ params }: PageProps) => {
  const { slug } = await params;
  const siteSettings = await getSiteSettings();

  const albumRecord = await prisma.cms_gallery_albums.findFirst({
    where: { slug, status: true },
    include: {
      images: {
        where: { status: true },
        orderBy: { sort_order: "asc" },
      },
    },
  });

  if (!albumRecord) {
    notFound();
  }

  // Convert BigInt ids to strings so this can cross the server -> client boundary
  const album: Album = {
    id: albumRecord.id.toString(),
    title: albumRecord.title,
    slug: albumRecord.slug,
    images: albumRecord.images.map((img) => ({
      id: img.id.toString(),
      image: img.image,
      caption: img.caption,
    })),
  };

  return (
    <>
      {/* <Banner /> */}
      <main
        className="mainsection"
        style={{
          backgroundImage: `url(${MainBg.src})`,
        }}
      >
        <div className="py-1"></div>
        <GalleryDetail album={album} />
      </main>

      <Footer siteSettings={siteSettings}>
        <AboutFooterText />
      </Footer>
    </>
  );
};

export default Page;













// import { notFound } from "next/navigation";

// import Footer from "@/components/common/Footer";

// import MainBg from "@/images/main-bg.webp";
// import { getSiteSettings } from "@/lib/getSiteSettings";
// import AboutFooterText from "@/components/frontend/pages/about/AboutFooterText";
// import Banner from "@/components/frontend/pages/history/Banner";
// import GalleryDetail from "@/components/frontend/pages/history/GalleryDetail";
// import { getAlbumBySlug } from "@/lib/Galleryalbums";

// interface PageProps {
//   params: Promise<{
//     slug: string;
//   }>;
// }

// const Page = async ({ params }: PageProps) => {
//   const { slug } = await params;
//   const siteSettings = await getSiteSettings();
//   const album = getAlbumBySlug(slug);

//   if (!album) {
//     notFound();
//   }

//   return (
//     <>
//       <Banner />
//       <main
//         className="mainsection"
//         style={{
//           backgroundImage: `url(${MainBg.src})`,
//         }}
//       >
//         <GalleryDetail album={album} />
//       </main>

//       <Footer siteSettings={siteSettings}>
//         <AboutFooterText />
//       </Footer>
//     </>
//   );
// };

// export default Page;