"use client";

import { Image, ImageColor, ImageVariant } from "@/generated/prisma";
import ImageComponent from "next/image";
import Link from "next/link";

type ImagePaletteWithItems = {
  image: ImageColor & {
    image: Image & {
      variants: ImageVariant[];
    }
  };
};

export default function ImageColorCard({ image }: ImagePaletteWithItems) {
  const thumbnail = image.image.variants.find((v) => v.type === "thumbnail");

  return (
    <Link
      href={`/images/${image.image.id}`}
      className="block overflow-hidden rounded-md border shadow-sm hover:shadow-md transition-shadow"
    >
      {thumbnail?.s3Key ? (
        <ImageComponent
          src={`/api/image/${thumbnail.s3Key}`}
          alt={image.image.altText || image.image.imageName}
          width={thumbnail.width}
          height={thumbnail.height}
          className="w-full h-auto object-cover"
        />
      ) : (
        <div className="w-full h-48 bg-gray-100 flex items-center justify-center text-muted-foreground text-sm">
          No Thumbnail
        </div>
      )}
      <div className="p-2 text-sm truncate">{image.image.imageName} ({image.type})</div>
    </Link>
  );
}