import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"

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

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

export default function FooterSecondaryNav({
  secondaryLinks,
  appDownloads,
}: FooterSecondaryNavProps) {
  return (
    <div className={styles.secondaryNavigation}>
      <nav className={styles.secondaryNavigationGroup}>
        <Body color="peach80" textTransform="uppercase">
          {appDownloads.title}
        </Body>
        <ul className={styles.secondaryNavigationList}>
          {appDownloads.links.map((link) => (
            <li key={link.id} className={styles.appDownloadItem}>
              <a href={link.href} target="_blank" rel="noopener noreferrer">
                <Image
                  src={
                    AppDownLoadLinks[link.id as keyof typeof AppDownLoadLinks]
                  }
                  alt={link.title}
                  width={125}
                  height={40}
                />
              </a>
            </li>
          ))}
        </ul>
      </nav>
      {secondaryLinks.map((link) => (
        <nav className={styles.secondaryNavigationGroup} key={link.title}>
          <Body color="peach80" textTransform="uppercase">
            {link.title}
          </Body>
          <ul className={styles.secondaryNavigationList}>
            {link.links.map((link) => (
              <li key={link.id} className={styles.secondaryNavigationItem}>
                {link.isExternal ? (
                  <a
                    href={link.href}
                    key={link.title}
                    target={link.openInNewTab ? "_blank" : "_self"}
                  >
                    {link.title}
                  </a>
                ) : (
                  <Link href={link.href} key={link.title}>
                    {link.title}
                  </Link>
                )}
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  )
}
