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

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

interface Props {
  menu: Footer['navItems']
}

export function FooterMenu({ menu }: Props) {
  if (!menu?.length) return null

  return (
    <nav className="space-y-6">
      <h4 className="text-xs font-semibold uppercase tracking-[0.18em] text-primary-foreground/75">
        Quick Links
      </h4>
      <ul className="space-y-3">
        {menu.map((item) => {
          return (
            <li key={item.id}>
              <CMSLink
                appearance="inline"
                className="text-sm text-primary-foreground/80 transition-colors hover:text-primary-foreground"
                {...item.link}
              />
            </li>
          )
        })}
      </ul>
    </nav>
  )
}