'use client'

import React from 'react'
import { usePathname } from 'next/navigation'
import NavLink from './NavLink'
import Link from 'next/link'

const routes = [
  { path: '/', label: 'About' },
  { path: '/projects', label: 'Projects' },
  { path: '/homelab', label: 'Homelab' },
  { path: '/contact', label: 'Contact' },
]

const Navbar = () => {
  const pathname = usePathname()

  return (
    <nav className="flex h-16 items-center justify-between shadow-md">
      <Link href="/">
        <div className="animate-gradient cursor-pointer select-none bg-gradient-to-r from-blue-400 via-pink-500 to-red-500 bg-[length:200%_200%] bg-clip-text pl-4 text-2xl font-semibold uppercase text-transparent">
          Matz Hilven
        </div>
      </Link>
      <div className="mr-8 flex items-center space-x-8">
        {routes.map(({ path, label }) => (
          <NavLink
            key={path}
            href={path}
            isActive={pathname === path}
            label={label}
          />
        ))}
      </div>
    </nav>
  )
}

export default Navbar
