import { ArrowRightIcon } from "@/components/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer"
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 color="baseTextMediumContrast" type="two" asChild>
              <Link
                color="burgundy"
                href={link.url}
                className={styles.mainNavigationLink}
                target={link.openInNewTab ? "_blank" : undefined}
              >
                {link.title}

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

export function FooterMainNavSkeleton() {
  const items = Array.from({ length: 4 }).map((_, i) => i)

  return (
    <nav className={styles.mainNavigation}>
      <ul className={styles.mainNavigationList}>
        {items.map((x) => (
          <li key={x} className={styles.mainNavigationItem}>
            <Subtitle color="baseTextMediumContrast" type="two" asChild>
              <span className={styles.mainNavigationLink}>
                <SkeletonShimmer width="80%" />
                <ArrowRightIcon color="peach80" />
              </span>
            </Subtitle>
          </li>
        ))}
      </ul>
    </nav>
  )
}
