```
export default class Toolbar {
  constructor(options = {}) {
    this.toolbar = null;
    this.isInitialized = false;
    this.isVisible = false;
    this.buttons = [];
    this.toggleButtons = [];
    this.options = options;
    this.styleElement = null; // To keep track of injected CSS
  }

  // Initialize the toolbar
  init() {
    if (this.isInitialized) return;

    // Inject CSS styles
    this.injectStyles();

    // Create toolbar container
    this.toolbar = document.createElement("div");
    this.toolbar.className = "custom-toolbar";

    // Apply positioning based on options
    this.applyPosition();

    // Apply additional styling if provided
    if (this.options.style) {
      Object.assign(this.toolbar.style, this.options.style);
    }

    // Append to body
    document.body.appendChild(this.toolbar);
    this.isInitialized = true;
  }

  // Inject CSS styles into the document
  injectStyles() {
    if (this.styleElement) return; // Prevent multiple injections

    const css = `
        /* Toolbar Styles */
        .custom-toolbar {
          position: fixed;
          background-color: #ffffff;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          padding: 10px;
          display: flex;
          gap: 10px;
          z-index: 1000;
          transition: opacity 0.3s ease, visibility 0.3s ease;
          opacity: 0;
          visibility: hidden;
        }
  
        .custom-toolbar.show {
          opacity: 1;
          visibility: visible;
        }
  
        .toolbar-button,
        .toolbar-toggle-button {
          padding: 8px 12px;
          border: none;
          border-radius: 4px;
          background-color: #1976d2;
          color: #ffffff;
          cursor: pointer;
          font-size: 14px;
          transition: background-color 0.2s ease;
        }
  
        .toolbar-button:hover,
        .toolbar-toggle-button:hover {
          background-color: #1565c0;
        }
  
        .toolbar-toggle-button.active {
          background-color: #388e3c;
        }
      `;

    this.styleElement = document.createElement("style");
    this.styleElement.type = "text/css";
    this.styleElement.appendChild(document.createTextNode(css));
    document.head.appendChild(this.styleElement);
  }

  // Apply positioning based on options
  applyPosition() {
    const { position } = this.options;

    // Define position styles
    const positions = {
      "top-left": { top: "20px", left: "20px", right: "auto", bottom: "auto" },
      "top-right": { top: "20px", right: "20px", left: "auto", bottom: "auto" },
      "top-center": {
        top: "20px",
        left: "50%",
        right: "auto",
        bottom: "auto",
        transform: "translateX(-50%)",
      },
      "bottom-left": {
        bottom: "20px",
        left: "20px",
        top: "auto",
        right: "auto",
      },
      "bottom-right": {
        bottom: "20px",
        right: "20px",
        top: "auto",
        left: "auto",
      },
      "bottom-center": {
        bottom: "20px",
        left: "50%",
        right: "auto",
        top: "auto",
        transform: "translateX(-50%)",
      },
    };

    // Apply default position if none provided
    let selectedPosition = positions["top-right"]; // default

    if (position && positions[position]) {
      selectedPosition = positions[position];
    } else if (position && typeof position === "object") {
      // Allow custom positioning via an object
      selectedPosition = position;
    }

    // Apply styles
    for (const [prop, value] of Object.entries(selectedPosition)) {
      this.toolbar.style[prop] = value;
    }
  }

  // Show the toolbar
  start() {
    if (!this.isInitialized) {
      this.init();
    }

    this.toolbar.classList.add("show");
    this.isVisible = true;
  }

  // Hide the toolbar
  stop() {
    if (this.toolbar) {
      this.toolbar.classList.remove("show");
      this.isVisible = false;
    }
  }

  // Destroy the toolbar
  destroy() {
    if (!this.isInitialized) return;

    // Remove all event listeners from buttons
    this.buttons.forEach((button) => {
      if (button._handleClick) {
        button.removeEventListener("click", button._handleClick);
      }
    });

    this.toggleButtons.forEach((button) => {
      if (button._handleClick) {
        button.removeEventListener("click", button._handleClick);
      }
    });

    // Remove toolbar from DOM
    this.toolbar?.parentNode?.removeChild(this.toolbar);
    this.toolbar = null;

    // Remove injected styles
    this.styleElement?.parentNode?.removeChild(this.styleElement);
    this.styleElement = null;

    // Reset state
    this.isInitialized = false;
    this.isVisible = false;
    this.buttons = [];
    this.toggleButtons = [];
  }

  // Add a regular button
  addButton(label, onClick) {
    if (!this.isInitialized) {
      console.warn("Toolbar not initialized. Call init() or start() first.");
      return;
    }

    const button = document.createElement("button");
    button.className = "toolbar-button";
    button.textContent = label;

    // Bind event listener and keep reference for later removal
    const handleClick = (event) => {
      onClick(event);
    };
    button.addEventListener("click", handleClick);
    button._handleClick = handleClick; // Custom property to reference the listener

    this.toolbar.appendChild(button);
    this.buttons.push(button);
  }

  // Add a toggle button
  addToggleButton(label, onToggle) {
    if (!this.isInitialized) {
      console.warn("Toolbar not initialized. Call init() or start() first.");
      return;
    }

    const button = document.createElement("button");
    button.className = "toolbar-toggle-button";
    button.textContent = label;
    button.dataset.active = "false";

    // Bind event listener and keep reference for later removal
    const handleClick = () => {
      const isActive = button.classList.toggle("active");
      onToggle(isActive);
    };
    button.addEventListener("click", handleClick);
    button._handleClick = handleClick; // Custom property to reference the listener

    this.toolbar.appendChild(button);
    this.toggleButtons.push(button);
  }
}

```
1. allow buttons to be added before initialization (which will be appended to element if init) and after initialization
2. allow buttons to have image (image url, svg, emoji etc), label (centered text, if any)