interface GearImageProps {
	src: string;
	alt: string;
	dominantColor?: string | null;
	cropZoom?: number | null;
	cropX?: number | null;
	cropY?: number | null;
	className?: string;
	cover?: boolean;
}

export function GearImage({
	src,
	alt,
	dominantColor,
	cropZoom,
	cropX,
	cropY,
	className = "",
	cover = false,
}: GearImageProps) {
	const hasCrop = cropZoom != null && cropZoom > 1;
	const bgStyle = dominantColor
		? { backgroundColor: dominantColor }
		: undefined;

	if (cover) {
		return (
			<img
				src={src}
				alt={alt}
				className={`w-full h-full object-cover ${className}`}
			/>
		);
	}

	if (hasCrop) {
		return (
			<div className="w-full h-full overflow-hidden" style={bgStyle}>
				<img
					src={src}
					alt={alt}
					className={`w-full h-full object-cover ${className}`}
					style={{
						transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
						transformOrigin: "center center",
					}}
				/>
			</div>
		);
	}

	return (
		<div
			className="w-full h-full flex items-center justify-center"
			style={bgStyle}
		>
			<img
				src={src}
				alt={alt}
				className={`w-full h-full object-contain ${className}`}
			/>
		</div>
	);
}

/**
 * Returns the background color for an image container.
 * Uses the dominant color if available, otherwise a neutral fallback.
 */
export function imageContainerBg(
	dominantColor?: string | null,
): string | undefined {
	return dominantColor || "#f3f4f6";
}
