import { useState } from "react";
import HeaderDrawer from "./HeaderDrawer";
import HomeSidebarDrawer from "./HomeSidebarDrawer";

interface Props {
  showSearch?: boolean;
}

const MobileHeader = (props: Props) => {
  const { showSearch = true } = props;
  const [titleText] = useState("MEMOS");

  return (
    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
      <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
        <HeaderDrawer />
        <span
          className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"
          onClick={() => location.reload()}
        >
          {titleText}
        </span>
      </div>
      <div className={`${showSearch ? "flex" : "hidden"} flex-row justify-end items-center pr-1`}>
        <HomeSidebarDrawer />
      </div>
    </div>
  );
};

export default MobileHeader;