import { NavLink } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const navLinkClass = ({ isActive }) =>
  `px-3 py-2 rounded-md text-sm font-medium transition-colors ${
    isActive
      ? 'bg-primary-600 text-white shadow-sm shadow-primary-900/20'
      : 'text-ink-100 hover:bg-white/10 hover:text-white'
  }`;

export default function Navbar() {
  const { user, logout } = useAuth();

  return (
    <nav className="bg-ink-900 border-b border-primary-500/20 shadow-lg shadow-ink-900/10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-3 gap-3">
          <div className="flex items-center gap-2">
            <div className="w-9 h-9 bg-primary-500 rounded-lg flex items-center justify-center shadow-sm shadow-primary-900/30">
              <span className="text-white font-bold text-sm">SH</span>
            </div>
            <div>
              <h1 className="text-white font-bold text-lg leading-tight">StockHub SMS</h1>
              <p className="text-ink-200 text-xs">Kigali City, Rwanda</p>
            </div>
          </div>

          {user && (
            <div className="flex flex-wrap items-center gap-1 sm:gap-2">
              <NavLink to="/products" className={navLinkClass}>Product</NavLink>
              <NavLink to="/warehouses" className={navLinkClass}>Warehouse</NavLink>
              <NavLink to="/transactions" className={navLinkClass}>Transactions</NavLink>
              <NavLink to="/reports" className={navLinkClass}>Reports</NavLink>
              <button
                onClick={logout}
                className="px-3 py-2 rounded-md text-sm font-medium text-rose-200 hover:bg-rose-600 hover:text-white transition-colors"
              >
                Logout
              </button>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}
