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 { FooterSecondaryNavProps } from "@/types/components/footer/navigation"

export default function FooterSecondaryNav({
  secondaryLinks,
}: FooterSecondaryNavProps) {
  return (
    <div className={styles.secondaryNavigation}>
      {Object.entries(secondaryLinks).map(([key, group]) => (
        <nav key={key} className={styles.secondaryNavigationGroup}>
          <Body
            className={styles.secondaryNavigationGroupDescription}
            color="peach80"
            textTransform="uppercase"
          >
            {group.title}
          </Body>

          <ul className={styles.secondaryNavigationList}>
            {group.links.map((link) => (
              <li key={link.id} className={styles.secondaryNavigationItem}>
                <Link
                  color="burgundy"
                  href={link.href}
                  className={styles.secondaryNavigationLink}
                >
                  {link.image ? (
                    <Image
                      src={link.image.src}
                      alt={link.title}
                      width={125}
                      height={40}
                    />
                  ) : (
                    link.title
                  )}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  )
}
