import { Link, usePathname } from '@/i18n/navigation'
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from '@/share/ui/navigation-menu'
import { EUHeaderItems } from './items'
import { cn } from '@/share/lib/utils'
import { useTranslations } from 'next-intl'

export function EUHeaderListItems() {
  const pathname = usePathname()
  const t = useTranslations('layout.header')

  const isItemActive = (url: string) =>
    pathname === url || pathname.startsWith(url + '/')

  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          {EUHeaderItems.map((item) => (
            <NavigationMenuLink
              asChild
              className={cn(
                navigationMenuTriggerStyle(),
                'px-9 h-16 rounded-none'
              )}
              key={item.url}
              data-active={isItemActive(item.url)}
            >
              <Link href={item.url}>
                {t.has(item.title) ? t(item.title) : item.title}
              </Link>
            </NavigationMenuLink>
          ))}
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}
