import { getTranslations } from "next-intl/server";

import { OptimizedImage } from "@/components/ui/optimized-image";
import { SectionReveal } from "@/components/sections/SectionReveal";
import { placeholderSrc } from "@/lib/placeholder";

import { GALLERY_ITEMS } from "./image-maker-gallery-data";

export async function ImageMakerGallery() {
  const t = await getTranslations("auto.componentsImageMakerImageMakerGallery");

  return (
    <section id="gallery" className="bg-neutral-50 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionReveal>
          <h2 className="text-center font-heading text-3xl font-bold text-neutral-900 sm:text-4xl">
            {t("title")}
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-center text-neutral-600">
            {t("subtitle")}
          </p>
        </SectionReveal>

        <SectionReveal className="mt-12 columns-2 gap-4 sm:columns-3 lg:columns-4 lg:gap-5">
          {GALLERY_ITEMS.map((item) => (
            <article
              key={item.id}
              className="mb-4 break-inside-avoid overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm lg:mb-5"
            >
              <div className={`relative w-full ${item.aspectClass}`}>
                <OptimizedImage
                  src={placeholderSrc(item.id, 600, 800)}
                  alt={item.alt}
                  fill
                  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
                  className="object-cover transition-transform duration-300 ease-out hover:scale-105"
                />
              </div>
            </article>
          ))}
        </SectionReveal>
      </div>
    </section>
  );
}
