import { GLib, Variable } from "astal";
import { Gtk } from "astal/gtk4";

const Time = ({ format = "%a, %e.%m %H:%M:%S" }) => {
    const time = Variable<string>("").poll(
        1000,
        () => GLib.DateTime.new_now_local().format(format)!,
    );

    return (
        <menubutton
            cssClasses={["time", "bar-button"]}
            hexpand
            halign={Gtk.Align.CENTER}
        >
            <label onDestroy={() => time.drop()} label={time()} halign={Gtk.Align.CENTER}></label>
            <popover>
                <Gtk.Calendar />
            </popover>
        </menubutton>
    );
};

export default {
    Time,
};