import { getCachedGlobal } from '@/utilities/getGlobals'
import React from 'react'
import { CMSLink } from '@/components/Link'
import { Container } from '@/components/ui/Container' // Standardize with your global grid

export async function Footer() {
  const footerData = await getCachedGlobal('footer', 1)()
  const navItems = footerData?.navItems || []

  return (
    <footer className="mt-auto border-t border-foreground/10 relative z-10">
      <Container className="py-8 flex flex-col items-center gap-4">
        <nav className="flex flex-wrap justify-center gap-2">
          {navItems.map(({ link }, i) => {
            return (
              <CMSLink
                key={i}
                {...link}
                appearance="link"
                // Standardized classes: added rounded-xl, background hover, and no-underline
                className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 no-underline transition-all"
              />
            )
          })}
        </nav>

        <p className="text-foreground/40 text-sm text-center">
          &copy; {new Date().getFullYear()} ByMackie. All rights reserved. To infinity and beyond
        </p>
      </Container>
    </footer>
  )
}
