import app from "ags/gtk3/app"
import { Astal, Gtk, Gdk } from "ags/gtk3"

export default function Heartbeat(gdkmonitor: Gdk.Monitor) {
  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor

  return (
    <window
      class="Heartbeat"
      gdkmonitor={gdkmonitor}
      exclusivity={Astal.Exclusivity.NONE}
      anchor={TOP | LEFT | RIGHT}
      application={app}
      layer={Astal.Layer.OVERLAY}
    >
      <eventbox
        onHover={() => {
          // reveal the bar
          const bar = app.get_window("bar")
          if (bar) bar.visible = true
        }}
      >
        <box class="heartbeat-line" />
      </eventbox>
    </window>
  )
}