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


export default (props)=>{
   
    return (
        <C.View cls="flx1 bgc-color-white"> 
            <C.Comp.Header />
            <C.View cls="w100% ai-c flx1"> 
                <C.ScrollView>

                
                    {/* main */}
                    <C.View cls="h28  w100 ai-c pt2">
                        <C.ImageBackground 
                                source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
                                cls="w80 flx1 h20"  
                                // resizeMode="contain"
                                > 
                            <C.View cls="flx1 bgc-rgba-black-0_3"> 
                                
                                    <C.View cls="flx-row w100% jc-sb ph5 pt0.6">
                                        <C.Text cls="f2.3 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
                                            오늘의 생각   
                                        </C.Text>
                                        <C.Text cls="f2.3 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
                                            Category 
                                        </C.Text>
                                    </C.View>

                                    <C.View cls="w100% ai-c pt1">
                                        <C.Text cls="f3.4 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
                                            마음의 양식 
                                        </C.Text>
                                        <C.Text cls="f2.2 ta-c w80% flx-w color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9">
                                            가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 
                                        </C.Text>
                                    </C.View>

                                    <C.View cls="w100% ai-c pt2">
                                        <C.EL.Icon type={"entypo"} name="controller-play" {...C.n2cls("color-white")} {...C.n2cls("size9")}/>
                                    </C.View>
                            </C.View>
                        </C.ImageBackground>


                        
                    </C.View>
                    {/* weekday*/}
                    <C.View cls="w100% mt2 bgc-rgba-gray-dark-0_2 ph3">
                        <C.Text cls="f2.6">
                            weekday
                        </C.Text>
                    </C.View>
                    <C.View cls="pt2">
                         <C.ScrollView horizontal cls="pv1"> 
                            <Imgs></Imgs> 
                            <Imgs></Imgs>
                            <Imgs></Imgs>

                         </C.ScrollView>
                    </C.View>


                    <C.View cls="w100% mt2 bgc-rgba-gray-dark-0_2 ph3">
                        <C.Text cls="f2.6">
                            weekend
                        </C.Text> 
                    </C.View>
                    <C.View cls="pt2">
                         <C.ScrollView horizontal cls="pv1"> 
                            <Imgs></Imgs> 
                            <Imgs></Imgs>
                            <Imgs></Imgs>

                         </C.ScrollView>
                    </C.View>

                </C.ScrollView>
            </C.View>  

        </C.View>
    )  


}


const Imgs = ()=>{
    return (
        <C.ImageBackground 
            source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
            cls="w45 flx1 h20 mh2.5"  
            // resizeMode="contain"
        >
             <C.View cls="flx1 bgc-rgba-black-0_3 ai-e">
                <C.EL.Icon type="entypo" name="lock" ccls="ma2" {...C.n2cls("color-white")}/>
             </C.View>
        </C.ImageBackground>
    )
}