import { App, Astal, Gtk, Gdk } from "astal/gtk3"
import { Variable } from "astal"

const time = Variable("").poll(1000, "date")

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

    return <window
        className="Bar"
        gdkmonitor={gdkmonitor}
        exclusivity={Astal.Exclusivity.EXCLUSIVE}
        anchor={TOP | LEFT | RIGHT}
        application={App}>
        <centerbox>
            <box halign={Gtk.Align.START}>
                <button
                    onClicked="echo hello"
                >
                    Welcome to AGS!
                </button>
            </box>
            <box halign={Gtk.Align.CENTER}>
            </box>
            <box halign={Gtk.Align.END}>
                <label label={time()} />
            </box>
        </centerbox>
    </window>
}
