class JobsGrid extends Shadow {
    jobs;

    constructor(jobs) {
        super()
        this.jobs = jobs
    }

    boldUntilFirstSpace(text) {
        const index = text.indexOf(' ');
        if (index === -1) {
            // No spaces — bold the whole thing
            return `<b>${text}</b>`;
        }
        return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
    }

    render() {
        VStack(() => {
            h3("Results")
            .marginTop(0.1, em)
            .marginBottom(1, em)
            .marginLeft(0.4, em)
            .color("var(--accent2)")

            if (this.jobs.length > 0) {
                ZStack(() => {
                    for (let i = 0; i < this.jobs.length; i++) {
                        VStack(() => {
                            p(this.jobs[i].title)
                                .fontSize(1.2, em)
                                .fontWeight("bold")
                                .marginBottom(0.5, em)
                            p(this.jobs[i].company)
                            p(this.jobs[i].city + ", " + this.jobs[i].state)
                                .marginBottom(0.5, em)
                            p(this.boldUntilFirstSpace(this.jobs[i].salary))
                        })
                        .padding(1, em)
                        .borderRadius(5, "px")
                        .background("var(--darkbrown)")
                    }
                })
                .display("grid")
                .gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
                .gap(1, em)
            } else {
                p("No Jobs!")
            }
        })
        .height(100, vh)
        .paddingLeft(2, em)
        .paddingRight(2, em)
        .paddingTop(2, em)
        .gap(0, em)
        .width(100, "%")
    }
}

register(JobsGrid)