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 }> }
  >
}) {
  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.title}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  )
}