import { Image } from "@/generated/prisma";
import clsx from "clsx";
import NextImage from "next/image";
import Link from "next/link";

export default function ImageList({ images, gallerySlug, albumSlug }: { images: Image[], gallerySlug: string, albumSlug: string }) {

  return (
    <section>
      <h1 className="text-2xl font-bold mb-4">Images</h1>
      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
        {images ? images.map((img) => (
          <Link href={`/galleries/${gallerySlug}/${albumSlug}/${img.id}`} key={img.id}>
            <div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background">
              <div className="relative aspect-[4/3] w-full bg-muted items-center justify-center">
                {img.fileKey ? (
                  <NextImage
                    src={`/api/image/thumbnails/${img.fileKey}.webp`}
                    alt={img.imageName}
                    fill
                    className={clsx(
                      " object-cover",
                      img.nsfw && "blur-md scale-105"
                    )}
                  />
                ) : (
                  <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
                    No cover image
                  </div>
                )}
              </div>
              <div className="p-4">
                <h2 className="text-lg font-semibold truncate text-center">{img.imageName}</h2>
              </div>
            </div>
          </Link>
        )) : "There are no images here!"}
      </div>
    </section>
  );
}