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

import { footer } from "../mockedData"

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

import { IconName } from "@/types/components/icon"

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

export default function FooterDetails() {
  const lang = getLang()
  const currentYear = new Date().getFullYear()
  const {
    socialMedia,
    copyrightCompany,
    copyrightInfo,
    tertiaryLinks,
    languageSwitcher,
  } = footer
  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) => (
            <a
              className={styles.socialLink}
              color="white"
              href={link.href}
              key={link.id}
              target="_blank"
              aria-label={link.title}
            >
              <SocialIcon iconName={link.title} />
            </a>
          ))}
        </nav>
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
          <Footnote textTransform="uppercase">
            © {currentYear} {copyrightCompany}
          </Footnote>
          <Footnote textTransform="uppercase" color="peach50">
            {copyrightInfo}
          </Footnote>
        </div>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            {tertiaryLinks.map((link) => (
              <Footnote asChild textTransform="uppercase" key={link.id}>
                <Link
                  className={styles.link}
                  color="peach50"
                  href={link.href}
                  target="_blank"
                >
                  {link.title}
                </Link>
              </Footnote>
            ))}
          </nav>
          {
            // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
          }
          <LanguageSwitcher urls={languageSwitcher.urls} />
        </div>
      </div>
    </section>
  )
}