/* eslint-disable @next/next/no-img-element */

import { env } from "@/env/server"

import HotelMarkerByType from "@/components/Maps/Markers"
import StaticMapComp from "@/components/Maps/StaticMap"
import { getIntl } from "@/i18n"
import { calculateLatWithOffset } from "@/utils/map"

import styles from "./staticMap.module.css"

import type { StaticMapProps } from "@/types/components/hotelPage/map/staticMap"

export default async function StaticMap({
  coordinates,
  hotelName,
  markerInfo,
  zoomLevel = 14,
}: StaticMapProps) {
  const intl = await getIntl()
  const mapId = env.GOOGLE_STATIC_MAP_ID
  const mapHeight = 640
  const markerHeight = 100
  const mapLatitudeInPx = mapHeight * 0.25
  const mapCoordinates = {
    lat: calculateLatWithOffset(coordinates.lat, mapLatitudeInPx, zoomLevel),
    lng: coordinates.lng,
  }

  return (
    <div className={styles.staticMap}>
      <StaticMapComp
        coordinates={mapCoordinates}
        width={380}
        height={mapHeight}
        zoomLevel={zoomLevel}
        altText={intl.formatMessage(
          {
            defaultMessage: "Map of {hotelName}",
          },
          { hotelName }
        )}
        mapId={mapId}
      />
      <HotelMarkerByType
        hotelId={markerInfo.hotelId}
        hotelType={markerInfo.hotelType}
        className={styles.mapMarker}
        height={markerHeight}
        style={{ top: `${mapLatitudeInPx - markerHeight}px` }}
      />
    </div>
  )
}
