class MonthHeaderRow extends Shadow {
    constructor(weekStartsOn) {
        super()
        this.weekStartsOn = weekStartsOn;
    }

    render() {
        const dayNames = ["S", "M", "T", "W", "T", "F", "S"];
        const ordered = Array.from({ length: 7}, (_, i) => dayNames[(this.weekStartsOn + i) % 7]);

        HStack(() => {
            ordered.forEach(name => {
                  p(name)
                    .margin(0)
                    .fontSize(.8, em)
                    .fontWeight("500")
                    .letterSpacing(0.04, em)
                    .color("var(--headertext)")
                    .opacity(0.5)
                    .flex(1)
                    .textAlign("center")
                    .paddingVertical(0.6, em)
                    .boxSizing("border-box")
            })
        })
        .width(100, pct)
        .borderBottom("1px solid var(--divider)")
    }
}

register(MonthHeaderRow)