"use client"

import NextImage, { type ImageProps, type ImageLoaderProps } from "next/image"

function imageLoader({ quality, src, width }: ImageLoaderProps) {
  return `${src}?w=${width}${quality ? "&q=" + quality : ""}`
}

// Next/Image adds & instead of ? before the params
export default function Image(props: ImageProps) {
  return (
    <NextImage
      {...props}
      loader={imageLoader}
    />
  )
}
