"use client";

import Image from "next/image";

const Navbar = () => {
  return (
    <div className="flex items-center justify-between p-2 h-12 bg-slate-200 ">
      {/* SEARCH BAR */}
     {/* <div className="hidden md:flex items-center gap-2 text-xs rounded-full ring-[1.5px] ring-gray-300 px-2 bg-white ml-3">
        <Image src="/search.png" alt="Search" width={14} height={14} />
        <input type="text" placeholder="Search.." className="w-[160px] p-1 bg-transparent outline-none" />
      </div> */}

      {/* ICONS AND USERS */}
      <div className="flex items-center gap-6 justify-end w-full mr-3">
        <div className="rounded-full w-6 h-6 flex items-center justify-center cursor-pointer">
          <Image src="/message.png" alt="Messages" width={18} height={18} />
        </div>
        <div className="rounded-full w-6 h-6 flex items-center justify-center cursor-pointer relative">
          <Image src="/announcement.png" alt="Announcements" width={18} height={18} />
        </div>
        <div className="flex flex-col">
          <span className="text-lg font-bold text-[#5C4AE4] text-right">Admin</span>
        </div>
        <Image src="/avatar.png" alt="User Avatar" width={36} height={36} className="rounded-full" />
      </div>
    </div>
  );
};

export default Navbar;
