import React from 'react'

import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Alert } from 'react-native' ;

const tip = {

  "idx":9,

  "category":"재테크",

  "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

  "title":"렌탈 서비스 금액 비교해보기",

  "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",

  "date":"2020.09.09"

 }

const popup = () => {

    Alert.alert("팝업!!")

}

export default function DetailPage(){

 return (

  <ScrollView style={styles.container}>

    <Image style={styles.main} source={{uri:tip.image}} resizeMode={"cover"}/>

    <View style={styles.textContainer}>

        <Text style={styles.title}>{tip.title}</Text>

        <Text style={styles.desc}>{tip.desc}</Text>

        <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>

      </View>

   </ScrollView>)

}

const styles = StyleSheet.create({

  container: {

   flex:1,

   backgroundColor:"black",

   alignItems:"center"

  },

  image:{

    height:400,

    margin:10,

    marginTop:40,

    borderRadius:20

  },

  title:{

   fontSize: 20,

   fontWeight: '700',

   color: white,

   paddingLeft:30,

   paddingTop:100,

   paddingRight:30

  },

  textContainer: {

    padding:20,

    alignItems:"center"

  },

  desc: {

    fontSize:10,

    fontWeight:"200",

    paddingLeft:20,

    paddingRight:20,

    textAlign:"center"

  }, 

  button:{

    borderColor:'deeppink',

    width:100,

    marginTop:20,

    padding:10,

    borderRadius:7

  },

  buttonText: {

    color:"white",

    fontSize:5,

    fontWeight:"500"

  }

})