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

import type { FooterNavigationProps } from "@/types/components/current/footer"

export default function Navigation({ linkGroups }: FooterNavigationProps) {
  return (
    <ul className={styles.container}>
      {linkGroups.map((group) => (
        <li className={styles.section} key={group.title}>
          <div className={styles.linkList}>
            <h3 className={styles.linkListTitle}>{group.title}</h3>
            <ul className={styles.listPages}>
              {group.links.map((link) => (
                <li className={styles.li} key={link.href}>
                  <a className={styles.listLink} href={link.href}>
                    {link.title}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </li>
      ))}
    </ul>
  )
}