import { getCachedGlobal } from '@/utilities/getGlobals'
import Link from 'next/link'
import React from 'react'

import type { Footer } from '@/payload-types'

import { CMSLink } from '@/components/Link'
import { Logo } from '@/components/Logo/Logo'
import { ResourcesFooterLocaleSwitcher } from '@/components/resources/ResourcesFooterLocaleSwitcher.client'

export async function Footer() {
  const footerData: Footer = await getCachedGlobal('footer', 1)()

  const navItems = footerData?.navItems || []

  return (
    <footer className="mt-auto border-t border-border bg-card text-foreground">
      <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
        <Link className="flex items-center" href="/">
          <Logo />
        </Link>

        <div className="flex flex-col items-start md:flex-row gap-4 md:items-center md:flex-wrap md:justify-end md:gap-6">
          <nav className="flex flex-col md:flex-row gap-4">
            {navItems.map(({ link }, i) => {
              return <CMSLink className="text-foreground hover:text-primary" key={i} {...link} />
            })}
          </nav>
          <ResourcesFooterLocaleSwitcher />
        </div>
      </div>
    </footer>
  )
}