import React from 'react';
 
import i18n from  "i18n-js";

import C from 'rn-class'

C.addColor("#03cf5d", "color-naver");
C.addColor("#6280ba", "color-agreeBtn");
C.addColor("#c87320" , "color-not_agreeBtn");



export default (props)=>{
    // 다국어 처리 영역 
    let {termsTitle, agree , not_agree}  = i18n.t("AcceptTerms");

    return (
        <C.View cls="flx1 bgc-color-white"> 
            <C.Comp.Header />
            {/* body */}

            <C.View cls="w100% ai-c flx1"> 
                <C.View cls="flx0.8 ai-c w100% jc-sa">
                {
                    termsTitle.map((title , idx)=>{

                        return (
                            <C.View key={`terms_${idx}`} cls="w80% bw0.2 jc-sa br5 pa2 sdof_0_5 sdo2 bc-color-gray-light-v3 el2"> 

                                <C.Text cls="f2 fw-b" >{title}</C.Text>  
                                
                                <C.EL.Divider cls="ma1"/> 

                                <C.EL.Button  title={title} ccls="w100%"
                                    tcls="flx0.9"
                                    iconRight icon={
                                        <C.EL.Icon
                                        ccls="ml3"
                                        name="popup"
                                        type="entypo"
                                        color="white"
                                        />
                                    }/>
                                <C.EL.CheckBox title='동의합니다' ccls="bgc-color-transparent bw0"/>
                            </C.View> 

                        )
                    })
                }
                </C.View>
                <C.View cls="flx0.2 ai-c w100% flx-row jc-c"> 
                    <C.EL.Button title={agree} ccls="w40% mr3" btncls="bgc-color-agreeBtn"/>
                    <C.EL.Button title={not_agree} ccls="w40%" btncls="bgc-color-not_agreeBtn"/> 
                </C.View>

            </C.View>
        </C.View>
    )


}