import React from "react";
import { View, StyleSheet, Text, Button, TouchableHighlight, Image } from "react-native";
import { City } from "../data/stub";


type VilleProps = {
    city: City
}

export function VilleCompopo(props: VilleProps){
    return (
    <View>
      <View style={styles.container}>
        <View style={styles.bothtext}>
          <Text style={styles.title}>{props.city.name}</Text>
          <Text>{props.city.latitude} - {props.city.longitude}</Text>
        </View>
        <TouchableHighlight>
          <Image source={{uri: "http://simpleicon.com/wp-content/uploads/star.svg"}}/>
        </TouchableHighlight>
      </View>
      <View style={styles.separator}/>
    </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    marginHorizontal: "5%",
    backgroundColor: "darksalmon",
    margin: 5,
    borderRadius: 15,
    width: "90%"
  },
  separator: {
    marginVertical: 4,
    backgroundColor: "rgba(255,255,255,0.3)",
    height: 1,
    width: '90%',
  },
  teaserImage: {
    width: 50,
    height: 50,
  },
  title: {
    fontWeight: "bold",
    fontSize: 18
  },
  bothtext: {
    width: "80%",
    margin: 10
  },
  button: {
    color: "black"
  }
});