import { type CSSProperties, type MouseEvent, type Ref, memo } from "react";

export interface ImageProps {
	alt?: string;
	src: string;
	sources?: readonly ImageSource[];
	className?: string;
	style?: CSSProperties;
	width?: number;
	height?: number;

	onClick?: (e: MouseEvent<HTMLImageElement>) => void;
	ref?: Ref<HTMLImageElement>;
}

export interface ImageSource {
	srcSet: string;
	media?: string;
	type?: "image/avif" | "image/webp" | "image/png";
}

export default memo(function Image({
	alt,
	src,
	sources,
	className,
	width,
	height,
	onClick,
	ref,
}: ImageProps) {
	return (
		<picture>
			{sources?.map((s) => (
				<source
					key={s.srcSet}
					type={s.type}
					srcSet={s.srcSet}
					media={s.media}
				/>
			))}
			{/* biome-ignore lint/a11y/useKeyWithClickEvents: we're just passing it down */}
			<img
				ref={ref}
				onClick={onClick}
				alt={alt}
				src={src}
				className={className}
				width={width}
				height={height}
			/>
		</picture>
	);
});