"use client"

import { useIntl } from "react-intl"

import { FacebookIcon, InstagramIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
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>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Address" })}
            </Body>
            <Body>
              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
            </Body>
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Driving directions" })}
            </Body>
            <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>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Contact us" })}
            </Body>
            <Link
              href={`tel:${hotel.contactInformation.phoneNumber}`}
              color="peach80"
            >
              {hotel.contactInformation.phoneNumber}
            </Link>
          </li>
          <li>
            {(hotel.socialMedia.facebook || hotel.socialMedia.instagram) && (
              <>
                <Body textTransform="bold">
                  {intl.formatMessage({ id: "Follow us" })}
                </Body>
                <div className={styles.soMeIcons}>
                  {hotel.socialMedia.instagram && (
                    <Link href={hotel.socialMedia.instagram} target="_blank">
                      <InstagramIcon color="burgundy" />
                    </Link>
                  )}
                  {hotel.socialMedia.facebook && (
                    <Link href={hotel.socialMedia.facebook} target="_blank">
                      <FacebookIcon color="burgundy" />
                    </Link>
                  )}
                </div>
              </>
            )}
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Email" })}
            </Body>
            <Link
              href={`mailto:${hotel.contactInformation.email}`}
              color="peach80"
            >
              {hotel.contactInformation.email}
            </Link>
          </li>
        </ul>
      </address>
      {hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
        <div className={styles.ecoLabel}>
          <Image
            height={38}
            width={43}
            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>
  )
}
