import { Home, MessageSquare, Package } from "lucide-react";
import { Link, NavLink } from "react-router-dom";

interface MobileNavAuthMenuProps {
  user: {
    name: string;
    id?: string;
    avatar: string;
  };
}

export default function MobileNavAuthMenu({ user }: MobileNavAuthMenuProps) {
  return (
    <>
      {/* Top Navigation Bar for Authenticated Users */}
      <div className="md:hidden fixed top-0 left-0 w-full  bg-white border-b border-gray-200 z-40">
        <div className="flex justify-around items-center py-2">
          <NavLink to="/feed" className={({ isActive }) => 
            `flex flex-col items-center p-2 ${isActive ? 'text-primary' : 'text-gray-500'}`
          }>
            <Home size={20} />
            <span className="text-xs mt-1">Home</span>
          </NavLink>
          
          <NavLink to="/assisted" className={({ isActive }) => 
            `flex flex-col items-center p-2 ${isActive ? 'text-primary' : 'text-gray-500'}`
          }>
            <img src="/src/images/nav/assisted.png" className='h-5' alt="" />
            <span className="text-xs mt-1">Assisted</span>
          </NavLink>
          <NavLink to="/messages" className={({ isActive }) => 
            `flex flex-col items-center p-2 ${isActive ? 'text-primary' : 'text-gray-500'}`
          }>
          <MessageSquare size={20} />
            <span className="text-xs mt-1">Inbox</span>
          </NavLink>
          
          <NavLink to="/packages" className={({ isActive }) => 
            `flex flex-col items-center p-2 ${isActive ? 'text-primary' : 'text-gray-500'}`
          }>
            <Package size={20} />
            <span className="text-xs mt-1">Packages</span>
          </NavLink>
          
          <Link to={`/account-page`} >
          <button
            className="flex flex-col items-center p-2 text-gray-500"
          >
            <img 
              src={user?.avatar}
              alt="Profile" 
              className="w-5 h-5 rounded-full object-cover" 
            />
            <span className="text-xs mt-1">Account</span>
          </button>
          </Link>
        </div>
      </div>

    </>
  );
}