import type { Globals, Menu } from '~/lib/types'

type Props = {
  globals: Globals
  menu: Menu | undefined
}

export function Footer({ globals, menu }: Props) {
  return (
    <footer className="mt-8 bg-muted/50">
      <div className="flex h-16 items-center justify-between gap-4 px-4">
        <nav className="flex gap-1">
          {menu?.items.map((item) => (
            <a
              key={item.label}
              href={item.url ?? '#'}
              className="px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </nav>
        <p className="text-sm text-muted-foreground">{globals.copyright}</p>
      </div>
    </footer>
  )
}
