/**
 * Copyright (c) 2025 xwra
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

interface TintedImageProps {
	src: string;
	colour: string;
	[key: string]: any;
}

export default function TintedImage({
	colour,
	src,
	...props
}: TintedImageProps) {
	return (
		<svg
			width="100%"
			height="100%"
			{...props}
		>
			<defs>
				<filter
					id="tint"
					x="0%"
					y="0%"
					width="100%"
					height="100%"
					colorInterpolationFilters="sRGB"
				>
					<feColorMatrix
						type="saturate"
						values="0"
						result="grayscale"
					/>
					<feFlood flood-color={colour} result="tint" />
					<feComposite
						in="tint"
						in2="grayscale"
						operator="arithmetic"
						k1="1"
						k2="0"
						k3="0"
						k4="0"
					/>
				</filter>
			</defs>
			<image
				x="0"
				y="0"
				width="100%"
				height="100%"
				preserveAspectRatio="xMidYMid meet"
				filter={`url(#tint)`}
				href={src}
			/>
		</svg>
	);
}
