"use client"

import { useIntl } from "react-intl"

import FacebookIcon from "@/components/Icons/Facebook"
import InstagramIcon from "@/components/Icons/Instagram"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

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

import { ContactProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"

export default function Contact({ hotel }: ContactProps) {
  const lang = useLang()
  const intl = useIntl()

  return (
    <section className={styles.wrapper}>
      <address className={styles.address}>
        <ul className={styles.contactInfo}>
          <li>
            <span className={styles.heading}>
              {intl.formatMessage({ id: "Address" })}
            </span>
            <span>
              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
            </span>
          </li>
          <li>
            <span className={styles.heading}>
              {intl.formatMessage({ id: "Driving directions" })}
            </span>
            <a
              href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
              className={styles.googleMaps}
              target="_blank"
            >
              Google Maps
            </a>
          </li>
          <li>
            <span className={styles.heading}>
              {intl.formatMessage({ id: "Email" })}
            </span>
            <Link
              href={`mailto:${hotel.contactInformation.email}`}
              color="peach80"
            >
              {hotel.contactInformation.email}
            </Link>
          </li>
          <li>
            <span className={styles.heading}>
              {intl.formatMessage({ id: "Contact us" })}
            </span>
            <Link
              href={`tel:${hotel.contactInformation.phoneNumber}`}
              color="peach80"
            >
              {hotel.contactInformation.phoneNumber}
            </Link>
          </li>
          <li>
            <span className={styles.heading}>
              {intl.formatMessage({ id: "Follow us" })}
            </span>
            <div className={styles.soMeIcons}>
              <Link href="#" target="_blank">
                <InstagramIcon color="burgundy" />
              </Link>
              <Link href="#" target="_blank">
                <FacebookIcon color="burgundy" />
              </Link>
            </div>
          </li>
        </ul>
      </address>
      {hotel.hotelFacts.ecoLabels.nordicEcoLabel ? (
        <div className={styles.ecoLabel}>
          <Image
            height={38}
            width={38}
            alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
            src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
          />
          <div className={styles.ecoLabelText}>
            <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
            <span>
              {hotel.hotelFacts.ecoLabels.svanenEcoLabelCertificateNumber}
            </span>
          </div>
        </div>
      ) : null}
    </section>
  )
}
