import { FooterNavigationProps } from "@/types/components/current/footer"
import { InternalLink, ExternalLink } from "@/types/requests/footer"

function getLink(linkObject: InternalLink | ExternalLink) {
  if (linkObject.__typename === "FooterNavigationLinksInternalLink") {
    return {
      title: linkObject.internal_link.link_text,
      href: linkObject.internal_link.pageConnection.edges[0].node.url,
    }
  }
  return linkObject.external_link.link
}

export default function Navigation({ linkGroups }: 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) => {
                  const linkItem = getLink(link)
                  return <li key={linkItem.title}>{linkItem.title}</li>
                })}
              </ul>
            </div>
          </li>
        )
      })}
    </ul>
  )
}