import SyncBadge from "../editor/SyncBadge";
import { useNotesStore } from "../../store/notesStore";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import Button from "../ui/Button";

type MobileHeaderProps = {
  onToggleSidebar: () => void;
  onLogout: () => void;
};

export default function MobileHeader({ onToggleSidebar, onLogout }: MobileHeaderProps) {
  const notes = useNotesStore((state) => state.notes);
  const activeId = useNotesStore((state) => state.activeId);
  const activeNote = notes.find((note) => note.id === activeId);

  return (
    <header className="sticky top-0 z-30 flex items-center justify-between bg-[var(--paper)]/80 px-4 py-3 backdrop-blur lg:hidden">
      <Button
        onClick={onToggleSidebar}
        className="bg-white px-3 py-2 text-sm font-semibold text-[var(--ink)]"
        aria-label="Menüyü aç"
      >
        <FontAwesomeIcon icon={faBars} className="h-4 w-4" />
      </Button>
      <div className="flex items-center gap-2">
        <SyncBadge note={activeNote} />
        <Button
          onClick={onLogout}
          className="border border-slate-200 px-2 py-1 text-xs text-[var(--ink)]"
        >
          Cikis
        </Button>
      </div>
    </header>
  );
}