"use client"

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

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) {
  if (!mainLinks.length) {
    return null
  }
  return (
    <nav className={styles.mainNavigation}>
      <ul className={styles.mainNavigationList}>
        {mainLinks.map((link) => (
          <li key={link.title} className={styles.mainNavigationItem}>
            <Typography variant="Title/Subtitle/md">
              <Link
                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>
            </Typography>
          </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}>
            <Typography variant="Title/Subtitle/md">
              <span className={styles.mainNavigationLink}>
                <SkeletonShimmer width="80%" />
                <MaterialIcon
                  icon="arrow_forward"
                  color="Icon/Interactive/Secondary"
                />
              </span>
            </Typography>
          </li>
        ))}
      </ul>
    </nav>
  )
}