/**
 * 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>
  );
}