import AstalTray from "gi://AstalTray"
import Gtk from "gi://Gtk?version=3.0"
import { createBinding, For } from "ags"

export default function SysTray() {
  const tray = AstalTray.get_default()
  const items = createBinding(tray, "items")

  return (
    <box class="systray">
      <For each={items}>
        {(item) => (
          <button
            class="systray-item"
            tooltipText={createBinding(item, "tooltipMarkup")}
            onClicked={() => item.activate(0, 0)}
          >
            <icon pixelSize={16} gicon={createBinding(item, "gicon")} />
          </button>
        )}
      </For>
    </box>
  )
}