class PeopleCard extends Shadow {
    constructor(person) {
        super()
        this.person = person
    }

    render() {
        HStack(() => {
            HStack(() => { })
                .boxSizing("border-box")
                .height(3.5, em)
                .width(3.5, em)
                .padding(0.5, em)
                .border("1px solid var(--accent)")
                .borderRadius(100, pct)
                .background("black")

            VStack(() => {
                h3(this.person.first_name + " " + this.person.last_name)
                    .color("var(--text)")
                    .fontSize(1.2, em)
                    .fontWeight("bold")
                    .marginVertical(0, em)
                p("Member since " + this.convertDate(this.person.created))
            })
            .verticalAlign("center")
            .horizontalAlign("left")
            .gap(0.5, em)
        })
        .width(100, pct)
        .boxSizing("border-box")
        .padding(0.75, em)
        .paddingHorizontal(1.75, em)
        .gap(1, em)
    }

    convertDate(rawDate) {
        const parsed = new Date(rawDate);

        if (isNaN(parsed.getTime())) return rawDate;

        const month = parsed.toLocaleString("en-US", { month: "long", timeZone: "UTC" });
        const day = parsed.getUTCDate();
        const year = parsed.getUTCFullYear();

        const ordinal = (n) => {
            const mod100 = n % 100;
            if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
            switch (n % 10) {
                case 1: return `${n}st`;
                case 2: return `${n}nd`;
                case 3: return `${n}rd`;
                default: return `${n}th`;
            }
        };

        return `${month} ${ordinal(day)}, ${year}`;
    }
}

register(PeopleCard)