import React from 'react';
import { Bell, Search, User, LogOut, Menu } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';

interface NavbarProps {
  collapsed: boolean;
  onToggleSidebar: () => void;
}

const Navbar: React.FC<NavbarProps> = ({ collapsed, onToggleSidebar }) => {
  const { user, logout } = useAuth();

  return (
    <nav className="bg-blue-900 text-white shadow-lg border-b border-blue-800 flex-shrink-0">
      <div className="px-4 sm:px-6 lg:px-8 transition-all duration-300">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center transition-all duration-300">
            {/* Sidebar Toggle Button */}
            <button
              onClick={onToggleSidebar}
              className="p-2 rounded-lg hover:bg-blue-800 transition-colors mr-4"
              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
            >
              <Menu className={`h-5 w-5 transition-all duration-300 ${collapsed ? 'scale-110' : ''}`} />
            </button>
            
            <div className="flex-shrink-0">
              <h1 className="text-xl font-bold text-left">Naval CMS</h1>
            </div>
          </div>

          <div className="hidden md:block">
            <div className="ml-4 flex items-center md:ml-6">
              {/* <div className="relative">
                <input
                  type="text"
                  placeholder="Search contacts..."
                  className="bg-blue-800 text-white placeholder-blue-300 px-4 py-2 rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <Search className="absolute right-3 top-2.5 h-4 w-4 text-blue-300" />
              </div>

              <button className="ml-3 p-2 rounded-full hover:bg-blue-800 transition-colors">
                <Bell className="h-5 w-5" />
              </button> */}

              <div className="ml-3 relative flex items-center">
                <div className="flex items-center space-x-3">
                  <div className="text-right">
                    <p className="text-sm font-medium">{user?.name}</p>
                    <p className="text-xs text-blue-300">{user?.rank}</p>
                  </div>
                  <div className="flex-shrink-0">
                    <div className="h-8 w-8 rounded-full bg-blue-700 flex items-center justify-center">
                      <User className="h-5 w-5" />
                    </div>
                  </div>
                  <button
                    onClick={logout}
                    className="ml-2 p-1 rounded hover:bg-blue-800 transition-colors"
                    title="Logout"
                  >
                    <LogOut className="h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;