web/packages/booking-flow/lib/components/HotelDetailsSidePeek/ContactInformation/index.tsx

"use client"

import NextLink from "next/link"
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 "@scandic-hotels/design-system/Image"
import { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "../../../hooks/useLang"

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

import type { Hotel, HotelAddress } from "@scandic-hotels/trpc/types/hotel"

interface ContactInformationProps {
  hotelAddress: HotelAddress
  contact: Hotel["contactInformation"]
  socials: Hotel["socialMedia"]
  ecoLabels: Hotel["hotelFacts"]["ecoLabels"]
  hotelName: Hotel["name"]
}

export function ContactInformation({
  hotelAddress,
  contact,
  socials,
  ecoLabels,
  hotelName,
}: ContactInformationProps) {
  const intl = useIntl()
  const lang = useLang()
  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
    `${hotelName}, ${hotelAddress.streetAddress}, ${hotelAddress.zipCode} ${hotelAddress.city}`
  )}`
  return (
    <div className={styles.wrapper}>
      <Typography variant="Title/Subtitle/lg">
        <h3>
          {intl.formatMessage({
            id: "common.practicalInformation",
            defaultMessage: "Practical information",
          })}
        </h3>
      </Typography>
      <Typography variant="Body/Paragraph/mdBold">
        <address className={styles.information}>
          <div className={styles.address}>
            <p>
              {intl.formatMessage({
                id: "common.address",
                defaultMessage: "Address",
              })}
            </p>
            <Typography variant="Body/Paragraph/mdRegular">
              <div>
                <p>{hotelAddress.streetAddress}</p>
                <p>{hotelAddress.city}</p>
              </div>
            </Typography>
          </div>
          <div className={styles.drivingDirections}>
            <p>
              {intl.formatMessage({
                id: "common.drivingDirections",
                defaultMessage: "Driving directions",
              })}
            </p>
            <TextLink href={directionsUrl} target="_blank">
              {intl.formatMessage({
                id: "common.googleMaps",
                defaultMessage: "Google Maps",
              })}
            </TextLink>
          </div>
          <div className={styles.contact}>
            <p>
              {intl.formatMessage({
                id: "common.contactUs",
                defaultMessage: "Contact us",
              })}
            </p>
            <TextLink href={`tel:+${contact.phoneNumber}`}>
              {contact.phoneNumber}
            </TextLink>
            <LocalCallCharges country={hotelAddress.country} />
          </div>
          {socials.instagram || socials.facebook ? (
            <div className={styles.socials}>
              <p>
                {intl.formatMessage({
                  id: "common.followUs",
                  defaultMessage: "Follow us",
                })}
              </p>
              <div className={styles.socialIcons}>
                {socials.instagram && (
                  <NextLink
                    target="_blank"
                    href={socials.instagram}
                    rel="noopener noreferrer"
                    title={intl.formatMessage({
                      id: "common.linkOpenInNewTab",
                      defaultMessage: "Opens in a new tab/window",
                    })}
                  >
                    <InstagramIcon
                      color="Icon/Interactive/Default"
                      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                      aria-label="Instagram"
                    />
                  </NextLink>
                )}
                {socials.facebook && (
                  <NextLink
                    target="_blank"
                    rel="noopener noreferrer"
                    href={socials.facebook}
                    title={intl.formatMessage({
                      id: "common.linkOpenInNewTab",
                      defaultMessage: "Opens in a new tab/window",
                    })}
                  >
                    <FacebookIcon
                      color="Icon/Interactive/Default"
                      // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                      aria-label="Facebook"
                    />
                  </NextLink>
                )}
              </div>
            </div>
          ) : null}
          <div className={styles.email}>
            <p>
              {intl.formatMessage({
                id: "common.email",
                defaultMessage: "Email",
              })}
            </p>
            <TextLink href={`mailto:${contact.email}`}>
              {contact.email}
            </TextLink>
          </div>
          {ecoLabels.nordicEcoLabel && (
            <div className={styles.ecoLabel}>
              <Image
                height={38}
                width={38}
                alt={intl.formatMessage({
                  id: "common.nordicSwanEcolabel",
                  defaultMessage: "Nordic Swan Ecolabel",
                })}
                src={`/_static/shared/icons/swan-eco/swan_eco_dark_${lang}.png`}
              />
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>
                  <p>
                    {intl.formatMessage({
                      id: "common.nordicSwanEcolabel",
                      defaultMessage: "Nordic Swan Ecolabel",
                    })}
                  </p>
                  <p>{ecoLabels.svanenEcoLabelCertificateNumber}</p>
                </div>
              </Typography>
            </div>
          )}
        </address>
      </Typography>
    </div>
  )
}