'use client'

import React from 'react'
import type { Header as HeaderType } from '@/payload-types'
import { CMSLink } from '@/components/Link'

export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
  const navItems = data?.navItems || []

  return (
    <nav className="flex flex-col md:flex-row gap-1 md:items-center">
      {navItems.map(({ link }, i) => (
        <CMSLink
          key={i}
          {...link}
          appearance="link"
          className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all"
        />
      ))}
    </nav>
  )
}
