class Home extends Shadow {



    render() {
        ZStack(() => {
            input("", "20vw")
                .backgroundColor("var(--darkred)")
                .color("var(--accent)")
                .border("none")
                .borderTop("1px solid var(--accent)")
                .borderBottom("1px solid var(--accent)")
                .outline("0.5px solid black")
                .borderRadius(7, px)
                .transition("padding .2s")
                .padding(0.5, em)
                .position("absolute")
                .x(50, vw).y(7, em)
                .transform("translate(-50%, -50%)")
                .onInput(() => {
                    console.log('typing')
                })
                .onFocus(function (focusing) {
                    if(focusing) {
                        this.style.padding = "1em"
                        this.style.borderColor = "var(--darkred)"
                    } else {
                        this.style.padding = "0.5em"
                        this.style.borderColor = "var(--accent)"
                    }
                })
            
            VStack(() => {

                let json = this.getJSONData()
                for(let i=0; i<100; i++) {
                    p(json[i].name)
                    .marginLeft(0, em)
                }
            })
            .paddingLeft(5, em)
            .paddingTop(10, em)
        })
        .backgroundColor("var(--main)")
        .display("block")
        .width(100, vw).height("auto")
        .color("var(--accent)")
        .fontFamily("Arial")
        .onAppear(() => {
            document.body.style.backgroundColor = "var(--main)"
        })
    }

    getJSONData() {
        const script = document.getElementById('jsonData');
        if (!script) {
            console.warn('initial-data script not found');
            return null;
        }

        try {
            // script.textContent is the raw JSON string
            const data = JSON.parse(script.textContent);
            console.log(data)
            return data;
        } catch (err) {
            console.error('Failed to parse initial-data JSON:', err);
            return null;
        }
    }
}

register(Home)