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 Body from "@/components/TempDesignSystem/Text/Body"

import { detailsData } from "../mockedData"

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

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

function socialIcon(iconName: string): JSX.Element | null {
  const SocialIcon = getIconByIconName(iconName as IconName)
  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
}

export default async function FooterDetails() {
  return (
    <section className={styles.details}>
      <div className={styles.topContainer}>
        <Link href="/">
          <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}>
          {detailsData.social.links.map((link) => (
            <Link
              className={styles.socialLink}
              color="white"
              href={link.href}
              key={link.id}
              target="_blank"
              title={link.title}
            >
              {socialIcon(link.title)}
            </Link>
          ))}
        </nav>
      </div>
      <div className={styles.bottomContainer}>
        <Body color="white">
          <strong>{detailsData.copyrightCompany}</strong>{" "}
          {detailsData.copyrightInfo}
        </Body>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            {detailsData.links.map((link) => (
              <Link
                className={styles.link}
                color="white"
                href={link.href}
                key={link.id}
                target="_blank"
                title={link.title}
              >
                {link.title}
              </Link>
            ))}
          </nav>
          {
            // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
          }
          <LanguageSwitcher urls={detailsData.languageSwitcher.urls} />
        </div>
      </div>
    </section>
  )
}
