"use client";

import type { Color, ImageColor, ImageVariant, PortfolioImage } from "@/generated/prisma";
import { cn } from "@/lib/utils";
import Image from "next/image";

// ---------- Type Definitions ----------

// Prisma-based image (square layout)
type SquareImage = PortfolioImage & {
  variants: ImageVariant[];
  colors?: (ImageColor & { color: Color })[];
};

// Flattened image for mosaic layout
type MosaicImage = {
  id: string;
  url: string;
  altText: string;
  backgroundColor: string;
};

// Union Props
type ImageCardProps =
  | {
    variant: "square";
    image: SquareImage;
    backgroundColor?: string;
  }
  | {
    variant: "mosaic";
    image: MosaicImage;
  };

export function ImageCard(props: ImageCardProps) {
  const { variant } = props;

  const isSquare = variant === "square";
  const isMosaic = variant === "mosaic";

  const backgroundColor =
    isSquare
      ? props.backgroundColor ?? "#e5e7eb"
      : props.image.backgroundColor;

  const altText =
    isSquare
      ? props.image.altText ?? props.image.name ?? "Image"
      : props.image.altText;

  const src =
    isSquare
      ? `/api/image/thumbnail/${props.image.fileKey}.webp`
      : props.image.url;

  // console.log(props.image);

  return (
    // <Link href={`/portfolio/${props.image.id}`}>
    <div
      className={cn(
        "overflow-hidden transition-all duration-100",
        isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
        isMosaic && "w-full h-full",
        "hover:border-2 border-transparent"
      )}
      style={{
        backgroundColor,
        '--tw-border-opacity': 1,
        '--hover-border-color': backgroundColor,
      } as React.CSSProperties}
    >
      <div
        className={cn(
          "relative w-full h-full",
          isSquare && "flex items-center justify-center"
        )}
      >
        <Image
          src={src}
          alt={altText}
          fill={isMosaic}
          width={isSquare ? 400 : undefined}
          height={isSquare ? 400 : undefined}
          className={cn(
            isSquare && "object-contain max-w-full max-h-full",
            isMosaic && "object-cover"
          )}
          loading="lazy"
        />
      </div>
    </div>
    // </Link>
  );
}
