import React, { useState } from "react";
import { SafeAreaView, Text, View, StyleSheet, Image } from "react-native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

const App = () => {
  const [character, setCharacter] = useState({
    name: "Able",
    age: 19,
    mood: "worried",
    status: "NOT INFECTED",
    message: "don't ask, follow me",
    location: "in classroom",
    infectionStatus: "Started the infection",
  });

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Made by Aidyn67</Text>
        <Text style={styles.status}>{character.status}</Text>
      </View>
      <Image
        source={{ uri: "https://utfs.io/f/93174052-8830-4685-868f-337af90d5a1a-h1khx.png" }}
        style={styles.image}
      />
      <View style={styles.infoContainer}>
        <Text style={styles.infoText}>{character.name}</Text>
        <Text style={styles.infoText}>age: {character.age}</Text>
        <Text style={styles.infoText}>mood: {character.mood}</Text>
        <Text style={styles.infoText}>{character.name}: {character.message}</Text>
        <Text style={styles.infoText}>({character.location})</Text>
        <Text style={styles.infectionStatus}>{character.infectionStatus}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 20,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  status: {
    fontSize: 16,
    fontWeight: "bold",
    color: "red",
  },
  image: {
    width: 150,
    height: 150,
    alignSelf: "center",
    marginBottom: 20,
  },
  infoContainer: {
    alignItems: "center",
  },
  infoText: {
    fontSize: 16,
    marginBottom: 5,
  },
  infectionStatus: {
    fontSize: 16,
    marginTop: 10,
    color: "red",
  },
});

export default App;