import { Bell, Search } from "lucide-react";

function Navbar() {
  return (
    <div className="h-20 bg-white border-b border-slate-200 px-8 flex items-center justify-between sticky top-0 z-50">
      {/* Left */}
      <div>
        <h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>

        <p className="text-sm text-slate-500">Welcome back, Admin 👋</p>
      </div>

      {/* Right */}
      <div className="flex items-center gap-5">
        {/* Search */}
        <div className="flex items-center bg-slate-100 px-4 py-2 rounded-2xl w-80">
          <Search size={18} className="text-slate-400" />

          <input
            type="text"
            placeholder="Search..."
            className="bg-transparent outline-none px-3 w-full"
          />
        </div>

        {/* Notification */}
        <div className="w-12 h-12 bg-slate-100 rounded-2xl flex items-center justify-center cursor-pointer hover:bg-slate-200 transition">
          <Bell size={20} />
        </div>

        {/* Profile */}
        <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
          A
        </div>
      </div>
    </div>
  );
}

export default Navbar;
