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


export default (props)=>{
    let datas = [
        {title:"사랑", sub:"Love", contens:"우리는 우리와 가까운, 우리가 원하는, 우리가 좋아하는, 우리를 편리하게 해 주고 행복하게 해 주던 많은 것들과 이별을 해야 하는 괴로움을 버려야 합니다.", img : require("../res/Working_meditation.png")},
        {title:"미움", sub:"Hate", contens:"싫어하는 것을 해야 하는 것, 싫어하는 사람과 함께 있는 것이란 얼마나 큰 괴로움인가. 이는 가장 큰 괴로움이며 여기서 벗어나야 합니다.", img : require("../res/Standing_meditation.png")},
        {title:"탐욕", sub:"Avarice", contens:"좋아하는 사람, 물건, 재산, 명예, 권력, 지위, 출세, 행복, 건강 등 얻고자 하고 바라지만 마음대로 구할 수 없는데서 괴로움은 시작된다.", img : require("../res/Seatand_meditation.png")},
        {title:"탐식", sub:"Voracity", contens:"현대사회에서 물질적 풍요와 상반되게 정신적 빈곤으로 인한 강박장애, 불안장애 같은 정신적 증상은 얻고자 하는 욕심으로 인하여 나타나는 화병의 일환", img : require("../res/Lying_meditation.png")},
    ]
    
    const pressConfirm = () => {
        props.navigation.navigate('Root');   
    }

    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">MIND(心)</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={pressConfirm} title="확인"/>  
            </C.View>  

        </C.View>
    )


}


