import { bind } from "astal"
import AstalTray from "gi://AstalTray?version=0.1"

export default function Systray() {
  const tray = AstalTray.get_default()

  return <box cssClasses={["Systray"]} >
    {
      bind(tray, "items").as(items => items.map(item => (
        <menubutton
          tooltipMarkup={bind(item, "tooltipMarkup")}
          menuModel={bind(item, "menuModel")}
          setup={(self) => {
            self.insert_action_group("dbusmenu", item.actionGroup)
          }}
        >
          <image gicon={bind(item, "gicon")} />
        </menubutton>
      )))
    }
  </box >
}