"use client"

import { PortfolioImage } from "@/generated/prisma";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";

export default function ImageGallery({ images }: { images: PortfolioImage[] }) {
  console.log(images);
  return (
    <div className="w-full flex flex-col gap-4">
      <div
        className="flex flex-wrap gap-4"
      >
        {images.map((image) => (
          <div key={image.id} style={{ width: 200, height: 200 }}>
            <Link href={`/portfolio/images/${image.id}`}>
              <div
                className={cn(
                  "overflow-hidden transition-all duration-100",
                  "w-full h-full",
                  "hover:border-2 border-transparent"
                )}
                style={{
                  '--tw-border-opacity': 1,
                } as React.CSSProperties}
              >
                <div
                  className={cn(
                    "relative w-full h-full"
                  )}
                >
                  <Image
                    src={`/api/image/thumbnail/${image.fileKey}.webp`}
                    alt={image.altText ?? image.name ?? "Image"}
                    fill
                    className={cn("object-cover"
                    )}
                    loading="lazy"
                  />
                </div>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
}