"use client"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { trackFooterClick } from "@/utils/tracking"

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="baseTextHighContrast" type="two" asChild>
              <Link
                color="burgundy"
                href={link.url}
                className={styles.mainNavigationLink}
                target={link.openInNewTab ? "_blank" : undefined}
                onClick={() => trackFooterClick("main", link.title)}
              >
                {link.title}
                <MaterialIcon
                  icon="arrow_forward"
                  color="Icon/Interactive/Secondary"
                />
              </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="baseTextHighContrast" type="two" asChild>
              <span className={styles.mainNavigationLink}>
                <SkeletonShimmer width="80%" />
                <MaterialIcon
                  icon="arrow_forward"
                  color="Icon/Interactive/Secondary"
                />
              </span>
            </Subtitle>
          </li>
        ))}
      </ul>
    </nav>
  )
}