 import React from 'react'
import { Link } from 'react-router-dom'

function Navbar () {
  const token = localStorage.getItem("token") && localStorage.getItem("token") !=="undefined";


  return (
    <nav className='text-2xl font-bold px-5 p-3 border-b bg-blue-950 '>
      <h1 className='text-3xl font-black tracking-tighter'>SALES STOCK MANAGEMENT SYSTEM</h1>
      <div className='flex items-center space-x-9'>
        {token ? (
          <>
            <Link to="/dashboard" className='px-4 p-2 font-bold text-black hover:bg-slate-700 transition-colors'>DASHBOARD</Link>
            <Link to="/customer" className='px-4 p-2 font-bold text-black hover:bg-slate-700 transition-colors'>CUSTOMER</Link>
            <Link to="/product" className='px-4 p-2 font-bold text-black hover:bg-slate-700 transition-colors'>PRODUCT</Link>
            <Link to="/sale" className='px-4 p-2 font-bold text-black hover:bg-slate-700 transition-colors'>SALE</Link>
            <Link to="/reports"className='px-4 p-2 font-bold text-black hover:bg-slate-700 transition-colors'>REPORTS</Link>
          </>
        ) : (
          <>
            <Link to="/login" className='px-4 p-2 font-bold text-black hover:bg-slate-600 transition'>LOGIN</Link>
            <Link to="/register" className='px-4 p-2 font-bold text-black hover:bg-slate-700 transition-colors'>REGISTER</Link>
          </>
        )}
      </div>
    </nav>
  )
}
export default Navbar
