import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import Image from "@/components/Image"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

import type { FooterDetailsProps } from "@/types/components/footer/navigation"
import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
import { IconName } from "@/types/components/icon"

function SocialIcon({ iconName }: SocialIconsProps) {
  const SocialIcon = getIconByIconName(iconName as IconName)
  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
}

export default async function FooterDetails({
  socialMedia,
  tertiaryLinks,
  languageUrls,
}: FooterDetailsProps) {
  const lang = getLang()
  const { formatMessage } = await getIntl()
  const currentYear = new Date().getFullYear()

  return (
    <section className={styles.details}>
      <div className={styles.topContainer}>
        <Link href={`/${lang}`}>
          <Image
            alt="Scandic Hotels logo"
            className={styles.logo}
            data-js="scandiclogoimg"
            data-nosvgsrc="/_static/img/scandic-logotype.png"
            itemProp="logo"
            height={22}
            src="/_static/img/scandic-logotype-white.svg"
            width={103}
          />
        </Link>
        <nav className={styles.socialNav}>
          {socialMedia?.links.map(
            (link) =>
              link.href && (
                <a
                  className={styles.socialLink}
                  color="white"
                  href={link.href.href}
                  key={link.href.title}
                  target="_blank"
                  aria-label={link.href.title}
                >
                  <SocialIcon iconName={link.href.title} />
                </a>
              )
          )}
        </nav>
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
          <Footnote textTransform="uppercase">
            © {currentYear}{" "}
            {formatMessage({ id: "Copyright all rights reserved" })}
          </Footnote>
        </div>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            {tertiaryLinks?.map(
              (link) =>
                link.url && (
                  <Footnote asChild textTransform="uppercase" key={link.title}>
                    <Link
                      className={styles.link}
                      color="peach50"
                      href={link.url}
                      target="_blank"
                    >
                      {link.title}
                    </Link>
                  </Footnote>
                )
            )}
          </nav>
          {languageUrls && (
            <LanguageSwitcher type="footer" urls={languageUrls} />
          )}
        </div>
      </div>
    </section>
  )
}