'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import ThemeSwitcher from './ThemeSwitcher';
import { MagnifyingGlassIcon, UserCircleIcon } from '@heroicons/react/24/outline';

export default function Navbar() {
  const pathname = usePathname();

  const navItems = [
    { href: '/parts', label: 'Parts Catalog' },
    { href: '/build', label: 'Build Checklist' },
    { href: '/builds', label: 'My Builds' },
  ];

  return (
    <>
      {/* Top Bar */}
      <div className="w-full bg-[#4B6516] text-white h-10 flex items-center justify-between px-4 sm:px-8">
        <span className="font-bold text-lg tracking-tight">Pew Builder</span>
        <UserCircleIcon className="h-7 w-7 text-white opacity-80" />
      </div>

      {/* Subnav */}
      <nav className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-14">
          {/* Left: Nav Links */}
          <div className="flex items-center space-x-6">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={`px-2 py-1 rounded-md text-sm font-medium transition-colors ${
                  pathname === item.href
                    ? 'text-primary font-semibold underline underline-offset-4'
                    : 'text-neutral-700 dark:text-neutral-200 hover:text-primary'
                }`}
              >
                {item.label}
              </Link>
            ))}
          </div>

          {/* Right: Sign In + Search */}
          <div className="flex items-center space-x-4">
            <Link href="/signin" className="btn btn-sm btn-ghost text-sm font-medium">
              Sign In
            </Link>
            <button className="p-2 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors">
              <MagnifyingGlassIcon className="h-5 w-5 text-neutral-700 dark:text-neutral-200" />
            </button>
            <ThemeSwitcher />
          </div>
        </div>
      </nav>
    </>
  );
}