import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"

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

export default async function FooterMainNav({
  mainLinks,
}: {
  mainLinks: Array<{ id: string; href: string; title: string }>
}) {
  return (
    <nav className={styles.mainNavigation}>
      <ul className={styles.mainNavigationList}>
        {mainLinks.map((link) => (
          <li key={link.id} className={styles.mainNavigationItem}>
            <Link
              color="burgundy"
              href={link.href}
              className={styles.mainNavigationLink}
            >
              {link.title}

              <ArrowRightIcon color="burgundy" />
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}