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

export default function App() {
  return (
    <View style={eren.container}>
      <View style={eren.card}>
        <View style={eren.ilkyari}>
          <Image
            source={require('./assets/cemyılmaz.png')}
            style={eren.image}
            resizeMode="cover"
          />
          <Text style={eren.isim}>Cem Yılmaz</Text>
          <Text style={eren.altmetin}>@cemy</Text>
          <Text style={eren.altmetin}>Product Designer.Kyiv</Text>
        </View>

        <View style={eren.ikinciyari}>
          <Text style={eren.bilgi}>12</Text>
          <Text style={eren.bilgi}>257</Text>
          <Text style={eren.bilgi}>57</Text>
          <View style={eren.metinler}>
            <Text style={eren.altmetin2}>Shots</Text>
            <Text style={eren.altmetin2}>Following</Text>
            <Text style={eren.altmetin2}>Followers</Text>
          </View>
          <TouchableOpacity style={eren.button}>
            <Text style={eren.buttonmetin}>Send Message</Text>
          </TouchableOpacity>
             <Text style={eren.altmetin3}>More</Text>
        </View>
      </View>
    </View>
  );
}

const eren = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  },
  card: {
    height: 425,
    width: 250,
    borderRadius: 15,
    overflow: 'hidden',
    backgroundColor: 'white',
  },
  ilkyari: {
    height: '60%',
    width: '100%',
    backgroundColor: 'lightgray',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ikinciyari: {
    flex: 1,
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    paddingHorizontal: 27,
    marginTop: 30,
  },
  image: {
    bottom: 15,
    width: '55%',
    height: '55%',
    borderRadius: 100,
  },
  isim: {
    fontSize: 23,
    bottom: 10,
  },
  altmetin: {
    fontSize: 11,
    bottom: 10,
    color: 'gray',
  },
   bilgi: {
    fontWeight: '500',
    width: '30%',
    textAlign: 'center',
  },
  altmetin2: {
    fontSize: 11,
    color: 'gray',
    marginBottom: 10,
    width: '30%',
    textAlign: 'center',
  },
  altmetin3: {
    fontSize: 11,
    color: 'gray',
    marginTop:15,
    width: '30%',
    textAlign: 'center',
    left:69,
  },
  metinler:{
    bottom: 30,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  button: {
    backgroundColor: 'blue',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 25,
    alignItems: 'center',
    justifyContent: 'center',
    width: '81%',  
    height: '30%',  
    left:20,
    textAlign:"center",
  },
  buttonmetin: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});