import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import HotelMarker from "@/components/Maps/Markers/HotelMarker"
import { formatPrice } from "@/utils/numberFormatting"

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

interface HotelPinProps {
  isActive: boolean
  hotelPrice: number | null
  currency: string
  hotelAdditionalPrice?: number
  hotelAdditionalCurrency?: string
}

export default function HotelPin({
  isActive,
  hotelPrice,
  currency,
  hotelAdditionalPrice,
  hotelAdditionalCurrency,
}: HotelPinProps) {
  const intl = useIntl()
  const isNotAvailable = !hotelPrice

  return (
    <div
      className={`${styles.pin} ${isActive ? styles.active : ""}`}
      data-hotelpin
    >
      <span className={styles.pinIcon}>
        {isNotAvailable ? (
          <MaterialIcon
            icon="calendar_clock"
            size={16}
            color={isActive ? "Icon/Interactive/Default" : "Icon/Inverted"}
          />
        ) : (
          <HotelMarker width={16} color={isActive ? "burgundy" : "white"} />
        )}
      </span>
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {isNotAvailable
            ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
              "—"
            : formatPrice(
                intl,
                hotelPrice,
                currency,
                hotelAdditionalPrice,
                hotelAdditionalCurrency
              )}
        </p>
      </Typography>
    </div>
  )
}
