import type { Locale } from "@/i18n/routing";
import type { GalleryImage } from "@prisma/client";
import Image from "next/image";
import { getTranslations } from "next-intl/server";

function altForLocale(image: GalleryImage, locale: Locale) {
  switch (locale) {
    case "ar":
      return image.altAr || image.altEn;
    case "ru":
      return image.altRu || image.altEn;
    case "it":
      return image.altIt || image.altEn;
    default:
      return image.altEn;
  }
}

export async function GalleryGrid({
  images,
  locale,
}: {
  images: GalleryImage[];
  locale: Locale;
}) {
  const t = await getTranslations("gallery");

  if (images.length === 0) {
    return (
      <p className="mt-8 text-center text-muted">{t("empty")}</p>
    );
  }

  return (
    <ul className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {images.map((img) => {
        const alt = altForLocale(img, locale) || t("imageAltFallback");
        return (
          <li
            key={img.id}
            className="group overflow-hidden rounded-xl border border-border bg-card shadow-[inset_0_0_0_1px_rgba(201,162,39,0.08)]"
          >
            <div className="relative aspect-[4/3] w-full bg-background">
              <Image
                src={img.url}
                alt={alt}
                fill
                sizes="(max-width: 768px) 100vw, 33vw"
                className="object-cover transition duration-500 group-hover:scale-105"
                unoptimized
              />
            </div>
          </li>
        );
      })}
    </ul>
  );
}