"use client";

import { useDispatch, useSelector } from "react-redux";
import { Menu, Search } from "lucide-react";
import { useScreenSizeContext } from "@/src/utils/providers/screenSizesContext";
import type { RootState } from "@/src/redux/store";
import { toggleSidebar, updateSearch } from "@/src/redux/appActions";
import { Input } from "@/components/ui/input";
import Profile from "./profile";

export default function AdminTopbar() {
  const dispatch = useDispatch();
  const { isMobile, isTablet } = useScreenSizeContext();
  const search = useSelector((state: RootState) => state.counter.search);

  return (
    <header className="h-24 bg-white border-b border-gray-200 flex items-center px-4 md:px-6">
      <div className="w-full flex items-center justify-between relative">
        <div className="absolute right-0">
          <Profile imgPath="/images/human-icon.jpg" />
        </div>

        {(isMobile || isTablet) && (
          <button
            onClick={() => dispatch(toggleSidebar())}
            className="p-2 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none"
          >
            <Menu size={24} />
          </button>
        )}
      </div>
    </header>
  );
}
