"use client"

import Image from "@scandic-hotels/design-system/Image"
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 useLang from "@/hooks/useLang"
import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"

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

import { AppDownLoadLinks } from "@/types/components/footer/appDownloadIcons"
import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"

export default function FooterSecondaryNav({
  secondaryLinks,
  appDownloads,
}: FooterSecondaryNavProps) {
  const lang = useLang()

  return (
    <div className={styles.secondaryNavigation}>
      <nav className={styles.secondaryNavigationGroup}>
        <Typography variant="Title/Overline/sm">
          <h3>{appDownloads.title}</h3>
        </Typography>
        {appDownloads.links.length ? (
          <ul className={styles.secondaryNavigationList}>
            {appDownloads.links.map(
              ({ href, type }) =>
                href && (
                  <li key={type}>
                    <a
                      href={href.href}
                      target="_blank"
                      aria-label={href.title}
                      onClick={() => trackSocialMediaClick(href.title)}
                    >
                      <Image
                        src={
                          AppDownLoadLinks[
                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
                          ]
                        }
                        alt={href.title}
                        width={125}
                        height={40}
                      />
                    </a>
                  </li>
                )
            )}
          </ul>
        ) : null}
      </nav>

      {secondaryLinks.map((group) => (
        <nav className={styles.secondaryNavigationGroup} key={group.title}>
          <Typography variant="Title/Overline/sm">
            <h3>{group.title}</h3>
          </Typography>
          {group.links.length ? (
            <ul className={styles.secondaryNavigationList}>
              {group.links.map((link) => (
                <li key={link.title}>
                  <Link
                    href={link.url}
                    target={link.openInNewTab ? "_blank" : undefined}
                    onClick={() => trackFooterClick(group.title, link.title)}
                  >
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>
          ) : null}
        </nav>
      ))}
    </div>
  )
}

export function FooterSecondaryNavSkeleton() {
  return (
    <div className={styles.secondaryNavigation}>
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="10ch" />
        <ul className={styles.secondaryNavigationList}>
          <li>
            <SkeletonShimmer width="16ch" />
          </li>
          <li>
            <SkeletonShimmer width="16ch" />
          </li>
        </ul>
      </nav>
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="20ch" />
        <ul className={styles.secondaryNavigationList}>
          <li>
            <SkeletonShimmer width="25ch" />
          </li>
        </ul>
      </nav>
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="15ch" />
        <ul className={styles.secondaryNavigationList}>
          <li>
            <SkeletonShimmer width="30ch" />
          </li>
          <li>
            <SkeletonShimmer width="36ch" />
          </li>
          <li>
            <SkeletonShimmer width="12ch" />
          </li>
          <li>
            <SkeletonShimmer width="20ch" />
          </li>
        </ul>
      </nav>
    </div>
  )
}