import Image from "@/components/Image"

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

export default function StaticMap({
  city,
  width,
  height,
  zoomLevel,
  mapType,
}: StaticMapProps) {
  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_STATIC_MAP_KEY
  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${apiKey}`

  return (
    <Image
      src=""
      overrideSrc={mapUrl}
      alt={`Map of ${city} city center`}
      width={width}
      height={height}
    />
  )
}
