import { getDictionary } from "@/content";
import { isLocale } from "@/content/types";
import { getGalleryPhotos } from "@/lib/actions/gallery";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { GalleryGrid } from "@/components/sections/GalleryGrid";

export default async function GalleryPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale: rawLocale } = await params;
  const locale = isLocale(rawLocale) ? rawLocale : "en";
  const dict = getDictionary(locale);
  const photos = await getGalleryPhotos();

  return (
    <div className="mx-auto max-w-7xl px-4 pb-24 pt-32 sm:px-6 lg:px-8">
      <SectionHeading
        eyebrow={dict.gallery.eyebrow}
        title={dict.gallery.title}
        titleAccent={dict.gallery.titleAccent}
        subtitle={dict.gallery.subtitle}
      />
      {photos.length === 0 ? (
        <p className="mt-16 text-center text-charcoal-400">{dict.gallery.emptyState}</p>
      ) : (
        <div className="mt-16">
          <GalleryGrid photos={photos} locale={locale} />
        </div>
      )}
    </div>
  );
}