export default function Header() {
  return (
    <header className="sticky top-0 z-40 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
      <div className="flex grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
        
        {/* Search Bar (Hiasan) */}
        <div className="hidden sm:block">
          <form action="#" method="POST">
            <div className="relative">
              <input
                type="text"
                placeholder="Type to search..."
                className="w-full bg-transparent pl-9 pr-4 font-medium focus:outline-none xl:w-125"
              />
            </div>
          </form>
        </div>

        {/* User Area */}
        <div className="flex items-center gap-3 2xsm:gap-7">
          <div className="flex items-center gap-4">
            <span className="hidden text-right lg:block">
              <span className="block text-sm font-medium text-black ">
                Valentino Heman
              </span>
              <span className="block text-xs font-medium">Mahasiswa</span>
            </span>
            
            {/* Avatar Bulat */}
            <div className="h-10 w-10 rounded-full bg-slate-300 overflow-hidden">
               {/* Nanti bisa diisi Image */}
               <div className="flex items-center justify-center h-full text-slate-600 font-bold">VH</div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}