import { GLib, Variable } from "astal"

const TIME_FORMAT = "%H:%M"

export default function Clock(props: { iconSide: "left" | "right" }) {
    const time = Variable<string>("").poll(1000, () =>
        GLib.DateTime.new_now_local().format(TIME_FORMAT)!)

    return <box className={`Time icon-${props.iconSide}`}>
        {props.iconSide == "left" && <label className="icon" label="" />}
        <label
            className="label"
            onDestroy={() => time.drop()}
            label={time()}
        />
        {props.iconSide == "right" && <label className="icon" label="" />}
    </box>
}