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

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

export default async function FooterSecondaryNav({
  secondaryLinks,
}: {
  secondaryLinks: Record<
    string,
    {
      title: string
      links: Array<{
        id: string
        href: string
        title: string
        image?: { src: string }
      }>
    }
  >
}) {
  return (
    <div className={styles.secondaryNavigation}>
      {Object.entries(secondaryLinks).map(([key, group]) => (
        <nav key={key} className={styles.secondaryNavigationGroup}>
          <p className={styles.secondaryNavigationGroupTitle}>{group.title}</p>
          <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>
  )
}