"use client";

import Image from "next/image";
import { cn } from "@/lib/utils";
import { useReveal } from "@/lib/use-reveal";

type RevealImageProps = {
  src: string;
  alt: string;
  /** Classes for the frame (sizing, radius, etc.). */
  className?: string;
  imgClassName?: string;
  /** next/image sizes hint. */
  sizes?: string;
  priority?: boolean;
  /** CSS aspect-ratio for the frame, e.g. "16/9" or "1/1". Omit if the parent sizes it. */
  aspect?: string;
  /** Gentle scale on hover (default true). Auto-disabled on touch. */
  zoom?: boolean;
  /** object-fit (default cover). */
  fit?: "cover" | "contain";
  /** Stagger delay (ms) for the fade-up. */
  delayMs?: number;
};

/**
 * A product image that fades up as it enters the viewport and gently scales on
 * hover, contained in an overflow-hidden frame so the zoom never spills. The
 * frame handles the reveal (see useReveal); the image handles the hover-zoom.
 */
export function RevealImage({
  src,
  alt,
  className,
  imgClassName,
  sizes = "100vw",
  priority,
  aspect,
  zoom = true,
  fit = "cover",
  delayMs,
}: RevealImageProps) {
  const ref = useReveal<HTMLDivElement>({ delayMs });
  return (
    <div
      ref={ref}
      className={cn("group relative overflow-hidden", className)}
      style={aspect ? { aspectRatio: aspect } : undefined}
    >
      <Image
        src={src}
        alt={alt}
        fill
        sizes={sizes}
        priority={priority}
        className={cn(
          fit === "cover" ? "object-cover" : "object-contain",
          zoom &&
            "transition-transform duration-700 ease-signature group-hover:scale-[1.045] motion-reduce:transition-none motion-reduce:group-hover:scale-100",
          imgClassName,
        )}
      />
    </div>
  );
}