import type { Metadata } from "next";

import CurveTop from "@/components/CurveTop/CurveTop";
import ImageGallery from "@/components/Gallery/ImageGallery";
import TopContent from "@/components/TopContent/TopContent";

import { apiEndpoints } from "@/lib/api";
import { canonicalUrls } from "@/lib/canonical";
import { Photo } from "@/types";

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "Customized Cakes - La Tarte",
    description:
      "Discover the joy of customized cakes with La Tarte! Choose your design, and we'll bake it with love to add a unique flair to your special moments. We specialize in the art of crafting personalized cakes and never miss you to feel special.",
    alternates: {
      canonical: canonicalUrls.customizedCake(),
    },
    openGraph: {
      title: "Customized Cakes - La Tarte",
      description:
        "Discover the joy of customized cakes with La Tarte! Choose your design, and we'll bake it with love to add a unique flair to your special moments. We specialize in the art of crafting personalized cakes and never miss you to feel special.",
      url: canonicalUrls.customizedCake(),
    },
  };
}

export default async function Gallery() {
  const { data: customizedCake } = await apiEndpoints.customizedCake();

  if (
    !customizedCake ||
    typeof customizedCake !== "object" ||
    !Array.isArray((customizedCake as any).gallery)
  ) {
    return (
      <>
        <CurveTop />
        <div className="main-container">
          <p>Sorry, no gallery found.</p>
        </div>
      </>
    );
  }

  const photos = (customizedCake as any).gallery as Array<Photo>;

  return (
    <>
      <CurveTop />
      <TopContent />
      <div className="main-container">
        <ImageGallery photos={photos} />
      </div>
    </>
  );
}