import React from 'react';
 
import C from 'rn-class'
C.addColor("#d7d7d7", "color-listbg");


export default (props)=>{
    let datas = [
        {title:"행선", sub:"Working\nmeditation"    , contens:"하루 20분 정도 걸으면서 하는 행선은 좌선 1시간 이상의 효과를 가져옵니다.", img : require("../res/Working_meditation.png")},
        {title:"주선", sub:"Standing\nmeditation"   , contens:"일상생활 속에 잠시 머무름은 인생에서 쉬어가는 의미를 가집니다. 바쁜 일상 속에서 잠시 머무름을 가지고 짧게 마음의 고요함을 찾으시길 바랍니다.", img : require("../res/Standing_meditation.png")},
        {title:"좌선", sub:"Seat and\nmeditation"   , contens:"가부좌가 아니더라도 일상생활 속에서 편한 자세로 앉아서 정신을 집중하여 무념무상의 상태로 들어가는 선수행을 말합니다.", img : require("../res/Seatand_meditation.png")},
        {title:"와선", sub:"Lying\nmeditation"      , contens:"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO", img : require("../res/Lying_meditation.png")},
    ]

    const pressContinue = () => {
        props.navigation.navigate('Guide2');
    }

    return (
        <C.View cls="flx1 bgc-color-white"> 
             <C.Comp.Header  {...props}/>
            <C.View cls="w100% ai-c flx1 jc-sa"> 
                <C.Text cls="f9 fw-b">BODY(身)</C.Text>

                {
                    datas.map((data, idx)=>{

                        return (
                                <C.View key={`list${idx}`} cls="w95% flx0.2 br50 bgc-color-gray-light-v3 jc-sa flx-row ai-c ph3"> 
                                    <C.View cls="flx0.3 ai-c"> 
                                        <C.Text cls="f3.2">{data.title}</C.Text>
                                        <C.Text cls="f1.7 ta-c">{data.sub}</C.Text>
                                    </C.View>

                                    <C.View cls="flx0.7">
                                        <C.Text cls="flx-w f1.9">
                                        {data.contens}
                                        </C.Text>
                                    </C.View>

                                    <C.View cls="flx0.2"> 
                                        <C.Image source={data.img} resizeMode="contain" 
                                        cls="w14" />
                                        {/* Working_meditation.png */}
                                    </C.View>

                                </C.View>
                            )
                    })
                }

                <C.Button onPress={pressContinue} title="계속"/> 
            </C.View>  

        </C.View>
    )


}


