var check1 by useState(false)
var check2 by useState(false)
var check3 by useState(false)
var check4 by useState(false)
var check5 by useState(false)
var check6 by useState(false)
var check7 by useState(false)
var check8 by useState(false)
var check9 by useState(false)
var check10 by useState(false)
var check11 by useState(false)
var check12 by useState(false)
var check13 by useState(false)
var check14 by useState(false)
var check15 by useState(false)
var check16 by useState(false)
var check17 by useState(false)
var check18 by useState(false)
var check19 by useState(false)
var check20 by useState(false)
var check21 by useState(false)
var check22 by useState(false)
var check23 by useState(false)
var check24 by useState(false)
var check25 by useState(false)
var check26 by useState(false)
var check27 by useState(false)
var check28 by useState(false)
var check29 by useState(false)
var check30 by useState(false)
var check31 by useState(false)
var check32 by useState(false)
var check33 by useState(false)
var check34 by useState(false)
var check35 by useState(false)

val SectionsPageThree = FC<Props> {
    data class MainTitles(
        val title: String,
        var isChecked: Boolean
    )

    var check1 by useState(false)
    var check2 by useState(false)
    var check3 by useState(false)
    var check4 by useState(false)
    var check5 by useState(false)
    var check6 by useState(false)
    var check7 by useState(false)
    var check8 by useState(false)
    var check9 by useState(false)
    var check10 by useState(false)
    var check11 by useState(false)
    var check12 by useState(false)
    var check13 by useState(false)
    var check14 by useState(false)
    var check15 by useState(false)
    var check16 by useState(false)
    var check17 by useState(false)
    var check18 by useState(false)
    var check19 by useState(false)
    var check20 by useState(false)
    var check21 by useState(false)
    var check22 by useState(false)
    var check23 by useState(false)
    var check24 by useState(false)
    var check25 by useState(false)
    var check26 by useState(false)
    var check27 by useState(false)
    var check28 by useState(false)
    var check29 by useState(false)
    var check30 by useState(false)
    var check31 by useState(false)
    var check32 by useState(false)
    var check33 by useState(false)
    var check34 by useState(false)
    var check35 by useState(false)
    var checkAll by useState(false)


    val MainTitlesList = mutableListOf(
        MainTitles("General", check1),
        MainTitles("Material", check2),
        MainTitles("Economy", check3),
        MainTitles("Markets", check4),
        MainTitles("Impacts", check5),
    )

    NavigationBar {}
    Box {
        className = styles.MAIN_ESG_FORM.cssClass
        Box {
            className = styles.GRI_TITLE.cssClass
            Typography {
                variant = TypographyVariant.h4
                +"Which Sections Would You Like To Create?"
            }
        }
        Box {
            Checkbox {
                checked = checkAll
                onChange = { _, checked ->
                    if (checked) {
                        check1 = true
                        check2 = true
                        check3 = true
                        check4 = true
                        check5 = true
                        check6 = true
                        check7 = true
                    } else {
                        check1 = false
                        check2 = false
                        check3 = false
                        check4 = false
                        check5 = false
                        check6 = false
                        check7 = false
                        check8 = false
                        check9 = false
                    }
                    checkAll = checked
                }
            }
            + "Select All?"
            Checkbox {
                checked = check1
                onChange = { _, checked ->
                    check1 = checked
                }
            }
            +"General"
            Checkbox {
                checked = check2
                onChange = { _, checked ->
                    check2 = checked
                }
            }
            +"Material"
            Checkbox {
                checked = check3
                onChange = { _, checked ->
                    check3 = checked
                }
            }
            +"Economy"
        }
    }

var state1 by useState(false)
var state2 by useState(false)
var checkAll by useState(false)
Checkbox {
    checked = checkAll
    onChange = { _, checked ->
        if (checked) {
            state1 = true
            state2 = true
        } else {
            state1 = false
            state2 = false
        }
        checkAll = checked
    }
}
Checkbox {
    checked = state1
    onChange = { _, checked ->
        state1 = checked
    }
}
Checkbox {
    checked = state2
    onChange = { _, checked ->
        state2 = checked
    }
}