web/packages/design-system/lib/components/Image.tsx

'use client'

import NextImage, {
  type ImageLoaderProps,
  ImageProps as NextImageProps,
} from 'next/image'

import ImageFallback from './ImageFallback'

import type { CSSProperties } from 'react'

type FocalPoint = {
  x: number
  y: number
}

export interface ImageProps extends NextImageProps {
  focalPoint?: FocalPoint
}

function imageLoader({ quality, src, width }: ImageLoaderProps) {
  const isAbsoluteUrl = src.startsWith('https://') || src.startsWith('http://')
  const hasQS = src.indexOf('?') !== -1

  if (width < 500) {
    width += 150 // HACK! Slightly increase width for better quality
  }

  if (isAbsoluteUrl) {
    return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}`
  }

  return `${src}${hasQS ? '&' : '?'}w=${width}${quality ? '&q=' + quality : ''}`
}

// Next/Image adds & instead of ? before the params
export default function Image({ focalPoint, style, ...props }: ImageProps) {
  const styles: CSSProperties = focalPoint
    ? {
        objectFit: 'cover',
        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
        ...style,
      }
    : { ...style }

  if (!props.src) {
    return <ImageFallback />
  }

  return <NextImage {...props} style={styles} loader={imageLoader} />
}