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

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

import type { FooterMainNavProps } from "@/types/components/footer/navigation"

export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
  return (
    <nav className={styles.mainNavigation}>
      <ul className={styles.mainNavigationList}>
        {mainLinks.map((link) => (
          <li key={link.title} className={styles.mainNavigationItem}>
            <Subtitle type="two" asChild>
              <Link
                color="burgundy"
                href={link.url}
                className={styles.mainNavigationLink}
              >
                {link.title}

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