import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getLang } from "@/i18n/serverContext"

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

import { AppDownLoadLinks } from "@/types/components/footer/appDownloadIcons"
import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"

export default function FooterSecondaryNav({
  secondaryLinks,
  appDownloads,
}: FooterSecondaryNavProps) {
  const lang = getLang()

  return (
    <div className={styles.secondaryNavigation}>
      {appDownloads && (
        <nav className={styles.secondaryNavigationGroup}>
          <Body color="baseTextMediumContrast" textTransform="uppercase">
            {appDownloads.title}
          </Body>
          <ul className={styles.secondaryNavigationList}>
            {appDownloads.links.map(
              (link) =>
                link.href && (
                  <li key={link.type} className={styles.appDownloadItem}>
                    <a
                      href={link.href.href}
                      target="_blank"
                      aria-label={link.href.title}
                    >
                      <Image
                        src={
                          AppDownLoadLinks[
                            `${link.type}_${lang}` as keyof typeof AppDownLoadLinks
                          ]
                        }
                        alt=""
                        width={125}
                        height={40}
                      />
                    </a>
                  </li>
                )
            )}
          </ul>
        </nav>
      )}
      {secondaryLinks.map((link) => (
        <nav className={styles.secondaryNavigationGroup} key={link.title}>
          <Body color="baseTextMediumContrast" textTransform="uppercase">
            {link.title}
          </Body>
          <ul className={styles.secondaryNavigationList}>
            {link?.links?.map((link) => (
              <li key={link.title} className={styles.secondaryNavigationItem}>
                <Link
                  href={link.url}
                  target={link.openInNewTab ? "_blank" : undefined}
                  color="burgundy"
                >
                  {link.title}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  )
}
