'use client';

import { WalletButton } from '@/components/wallet/WalletButton';
import { useWalletConnection } from '@/hooks/useWalletConnection';
import { Menu, X } from "lucide-react";
import Link from 'next/link';
import { useState } from 'react';

export function Navbar() {
  const { isConnected } = useWalletConnection();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
   <nav className="fixed top-0 left-0 right-0 z-50 bg-white border-b-2 border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <div className="px-2 bg-primary flex items-center justify-center border-2 border-primary">
              <span className="text-white text-2xl font-bold">D.M.T.P</span>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-1">
            <Link href="/tasks" className="text-sm font-medium px-4 py-2 hover:bg-gray-100 transition-colors text-gray-700 hover:text-primary">
              Marketplace
            </Link>
            <Link href="/dashboard" className="text-sm font-medium px-4 py-2 hover:bg-gray-100 transition-colors text-gray-700 hover:text-primary">
              Dashboard
            </Link>
            <Link href="/profile" className="text-sm font-medium px-4 py-2 hover:bg-gray-100 transition-colors text-gray-700 hover:text-primary">
              Profile
            </Link>
          </div>

          {/* Right Actions */}
          <div className="flex items-center gap-4">
            <div className="hidden sm:inline-flex">
              <WalletButton />
            </div>

            {/* Mobile Menu Button */}
            <button className="md:hidden p-2 hover:bg-gray-100 rounded" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden pb-4 space-y-1 border-t border-gray-200 pt-2">
            <Link href="/tasks" className="block px-4 py-2 hover:bg-gray-100 font-medium text-gray-700">
              Marketplace
            </Link>
            <Link href="/dashboard" className="block px-4 py-2 hover:bg-gray-100 font-medium text-gray-700">
              Dashboard
            </Link>
            <Link href="/profile" className="block px-4 py-2 hover:bg-gray-100 font-medium text-gray-700">
              Profile
            </Link>
            <div className="px-4 py-2">
              <WalletButton />
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}