"use client"

import { useIntl } from "react-intl"

import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"

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 type { ContactProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"

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

  const addressStr = `${hotel.address.streetAddress}, `
  const cityStr = hotel.address.city

  return (
    <section className={styles.wrapper}>
      <address className={styles.address}>
        <ul className={styles.contactInfo}>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Address" })}
            </Body>
            <Body>
              {addressStr}
              <br />
              {cityStr}
            </Body>
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Driving directions" })}
            </Body>
            <Link
              href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
            >
              <span className={styles.link}>
                {intl.formatMessage({ id: "Google Maps" })}
              </span>
            </Link>
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Contact us" })}
            </Body>
            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
              <span className={styles.link}>
                {hotel.contactInformation.phoneNumber}
              </span>
            </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="Icon/Interactive/Default" />
                    </Link>
                  )}
                  {hotel.socialMedia.facebook && (
                    <Link href={hotel.socialMedia.facebook} target="_blank">
                      <FacebookIcon color="Icon/Interactive/Default" />
                    </Link>
                  )}
                </div>
              </>
            )}
          </li>
          <li>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Email" })}
            </Body>
            <Link href={`mailto:${hotel.contactInformation.email}`}>
              <span className={styles.link}>
                {hotel.contactInformation.email}
              </span>
            </Link>
          </li>
        </ul>
      </address>
      {hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
        <div className={styles.ecoContainer}>
          <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>
          <div className={styles.ecoLabelText}>
            <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
            <span>
              {hotel.hotelFacts.ecoLabels.svanenEcoLabelCertificateNumber}
            </span>
          </div>
        </div>
      ) : null}
    </section>
  )
}
