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

export default function Navbar() {
  const token = localStorage.getItem("token");

  return (
    <nav className="bg-slate-900 border-b border-slate-800 text-white sticky top-0 z-50 shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <h1 className="text-xl font-extrabold tracking-wide text-blue-500">🔧 CRPMS</h1>
        
        <div className="flex items-center space-x-2">
          {token ? (
            <>
              <Link to="/dashboard" className="px-3 py-2 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition">Dashboard</Link>
              <Link to="/car" className="px-3 py-2 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition">Cars</Link>
              <Link to="/servicerecord" className="px-3 py-2 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition">Records</Link>
              <Link to="/payment" className="px-3 py-2 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition">Payments</Link>
              <Link to="/reports" className="px-3 py-2 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition">Reports</Link>
              <button 
                onClick={() => {
                  localStorage.removeItem("token");
                  window.location.href = "/login";
                }}
                className="ml-4 bg-rose-950 border border-rose-900 text-rose-400 hover:bg-rose-900 hover:text-white px-4 py-2 rounded-xl text-sm font-bold transition-all"
              >
                Logout
              </button>
            </>
          ) : (
            <>
              <Link to="/login" className="px-4 py-2 rounded-xl text-sm font-semibold text-slate-300 hover:text-white transition">Login</Link>
              <Link to="/register" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm font-bold transition shadow-lg shadow-blue-900/30">Register</Link>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}
