'use client'

import { cn } from '@/utils/cn'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ExternalLink } from '@/components/ui/ExternalLink'
import { navItems } from '@/components/layout/navItems'

type NavLinksProps = {
  gitOriginUrl: string | null
}

export function NavLinks({ gitOriginUrl }: NavLinksProps) {
  const pathname = usePathname()

  const isActive = (href: string) => {
    if (href === '/') {
      return pathname === href
    }
    return pathname?.startsWith(href)
  }

  return navItems.map((item) => (
    <li
      key={item.href}
      className={cn(
        'transition-colors rounded-md',
        isActive(item.href) ? 'text-fg bg-fg/25' : 'text-fg-dim hover:text-fg hover:bg-fg/10',
      )}
    >
      {item.isExternal ? (
        <ExternalLink
          href={
            item.href.includes('{gitOriginUrl}')
              ? item.href.replace('{gitOriginUrl}', gitOriginUrl ?? '')
              : item.href
          }
          className="flex items-center gap-2 px-2 py-1 hover:no-underline focus:no-underline"
        >
          {item.icon}
          {item.label}
        </ExternalLink>
      ) : (
        <Link href={item.href} className="flex items-center gap-2 px-2 py-1">
          {item.icon}
          {item.label}
        </Link>
      )}
    </li>
  ))
}