'use client'

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

export function MobileNavbar() {
  const pathname = usePathname()

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

  return (
    <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-bg border-t border-border z-50">
      <div className="flex justify-between items-center p-4 max-w-90 mx-auto">
        {navItems
          .filter((item) => !item.isExternal)
          .map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'transition-colors',
                isActive(item.href) ? 'text-accent' : 'text-fg-dim hover:text-fg',
              )}
            >
              {item.icon}
            </Link>
          ))}
      </div>
    </nav>
  )
}
