import React, { useState, useEffect } from "react";

function EditModeToggle() {
  const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");

  const toggleEditMode = () => {
    const newEditMode = !editMode;
    setEditMode(newEditMode);
    localStorage.setItem("editMode", newEditMode);
    //Browser neu laden, um die Änderungen anzuwenden
    window.location.reload();
  };

  useEffect(() => {
    const storedMode = localStorage.getItem("editMode") === "true";
    setEditMode(storedMode);
  }, []);

  return (
    <button onClick={toggleEditMode} className="bg-gray-200 p-2 rounded">
      {editMode ? "Bearbeitungsmodus deaktivieren" : "Bearbeitungsmodus aktivieren"}
    </button>
  );
}

export default EditModeToggle;