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

import { CMSLink } from '@/components/Link'

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

  const navItems = footerData?.navItems || []

  return (
    <footer className="mt-auto border-t border-white/10 text-white">
      <div className="container py-8 flex flex-col items-center gap-4">

        <nav className="flex flex-wrap justify-center gap-6">
          {navItems.map(({ link }, i) => {
            return <CMSLink className="text-white/60 hover:text-white transition-colors text-sm" key={i} {...link} />
          })}
        </nav>

        <p className="text-white/40 text-sm text-center">
          &copy; {new Date().getFullYear()} ByMackie. All rights reserved.
        </p>

      </div>
    </footer>
  )
}