import {
  FooterNavigationProps,
  FooterNavigationItemProps,
} from "@/types/components/current/footer"
import Link from "next/link"

function NavigationItem({ linkObject, lang }: FooterNavigationItemProps) {
  if (linkObject.__typename === "FooterNavigationLinksInternalLink") {
    const href = `/${lang}${linkObject.internal_link.pageConnection.edges[0].node.url}`
    return (
      <li>
        <Link href={href}>{linkObject.internal_link.link_text}</Link>
      </li>
    )
  }
  return (
    <li>
      <a href={linkObject.external_link.link.href}>
        {linkObject.external_link.link.title}
      </a>
    </li>
  )
}

export default function Navigation({
  linkGroups,
  lang,
}: FooterNavigationProps) {
  return (
    <ul className="l-footer-sections global-footer__content__sections">
      {linkGroups.map((group) => {
        return (
          <li className="global-footer-section" key={group.title}>
            <div className="link-list">
              <h3 className="link-list-header">{group.title}</h3>
              <ul className="list-footer-pages">
                {group.links.map((link, idx) => {
                  return (
                    <NavigationItem key={idx} linkObject={link} lang={lang} />
                  )
                })}
              </ul>
            </div>
          </li>
        )
      })}
    </ul>
  )
}