 import React from "react";
import { Link } from "react-router-dom";

function Navbar(){
    const token = localStorage.getItem("token")
    return(
        <nav className="text-xl font-bold bg-slate-500 text-white p-4 flex justify-between items-center">
            <h1 className="font-extrabold tracking-wide text-blue-200">STOCK HUB PORTAL</h1>
            <div className="flex gap-6 items-center">
                {token ? (
                    <>
                        <Link to="/dashboard" className="hover:text-blue-200">Dashboard</Link>
                        <Link to="/product" className="hover:text-blue-200">Product</Link>
                        <Link to="/warehouse" className="hover:text-blue-200">Warehouse</Link>
                        <Link to="/stockTransaction" className="hover:text-blue-200">StockTransaction</Link>
                        <Link to="/reports" className="hover:text-blue-200">Reports</Link>
                        <button 
                            className="bg-red-500 px-3 py-1 rounded text-sm hover:bg-red-600"
                            onClick={() => {
                                localStorage.removeItem("token");
                                window.location.href = "/login";
                            }}
                        >
                            Logout
                        </button>
                    </>
                ) : (
                    <>
                        <Link to="/login" className="hover:text-blue-200">Login</Link>
                        <Link to="/register" className="hover:text-blue-200">Register</Link>
                    </>
                )}
            </div>
        </nav>
    )
}
export default Navbar;
