import { SectionHeading } from "@/components/ui/SectionHeading";
import { Button } from "@/components/ui/Button";
import { GalleryGrid } from "@/components/sections/GalleryGrid";
import type { Dictionary, Locale } from "@/content/types";
import type { GalleryPhoto } from "@/generated/prisma/client";

export function GallerySection({
  dict,
  locale,
  photos,
}: {
  dict: Dictionary;
  locale: Locale;
  photos: GalleryPhoto[];
}) {
  return (
    <section id="gallery" className="mx-auto max-w-7xl px-4 py-24 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.slice(0, 8)} locale={locale} />
        </div>
      )}
      {photos.length > 0 ? (
        <div className="mt-12 text-center">
          <Button href={`/${locale}/gallery`} variant="secondary">
            {dict.gallery.viewAll}
          </Button>
        </div>
      ) : null}
    </section>
  );
}