/* eslint-disable @next/next/no-img-element */
import { env } from "@/env/server"

import { getUrlWithSignature } from "@/utils/map"

import { StaticMapProps } from "@/types/components/maps/staticMap"

export default function StaticMap({
  city,
  coordinates,
  width,
  height,
  zoomLevel = 14,
  mapType = "roadmap",
  altText,
}: StaticMapProps) {
  const key = env.GOOGLE_STATIC_MAP_KEY
  const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
  const baseUrl = "https://maps.googleapis.com/maps/api/staticmap"
  const center = coordinates ? `${coordinates.lat},${coordinates.lng}` : city

  if (!center) {
    return null
  }

  // Google Maps Static API only supports images smaller than 640x640px. Read: https://developers.google.com/maps/documentation/maps-static/start#Largerimagesizes
  const url = new URL(
    `${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
  )
  const src = getUrlWithSignature(url, secret)

  return <img src={src} alt={altText} />
}