Cast sitter

screens/tabs/Catsitter.js

-import { StyleSheet, Text, View, FlatList } from "react-native";
+import { Text, View, Dimensions, TouchableOpacity, Image } from "react-native";
 import React, { useState, useLayoutEffect } from "react";
 import { collection, query, onSnapshot, where, and } from "firebase/firestore";
-import { auth, database } from "../../config/firebase";
-import styles from "../../assets/styles";
+import { database } from "../../config/firebase";
+import Icon from "../../components/Icon";
+import styles, {
+  DISLIKE_ACTIONS,
+  LIKE_ACTIONS,
+  WHITE,
+} from "../../assets/styles";
+
 
 const Catsitter = ({ route }) => {
   const { id } = route.params;
@@ -20,30 +26,82 @@ const Catsitter = ({ route }) => {
     return unsubscribe;
   }, []);
 
+  const fullWidth = Dimensions.get("window").width;
+
+  const imageStyle = [
+    {
+      borderRadius: 8,
+      width: catsitter.hasVariant ? fullWidth / 2 - 30 : fullWidth - 80,
+      height: catsitter.hasVariant ? 170 : 350,
+      margin: catsitter.hasVariant ? 0 : 20,
+    },
+  ];
+
+  const nameStyle = [
+    {
+      paddingTop: catsitter.hasVariant ? 10 : 15,
+      paddingBottom: catsitter.hasVariant ? 5 : 7,
+      color: "#363636",
+      fontSize: catsitter.hasVariant ? 15 : 30,
+    },
+  ];
+
+
   return (
+    <>
+      <View style={{
+        borderRadius: 8,
+        alignItems: "center",
+        margin: 10,
+        elevation: 1,
+        padding: 10,
+        width: "95%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      }}>
+        {/* IMAGE */}
+        <Image source={{ uri: catsitter.avatar }} style={imageStyle} />
+
+        {/* MATCHES */}
+        <View style={styles.matchesCardItem}>
+          <Text style={styles.matchesTextCardItem}>
+            <Icon name="heart" color={WHITE} size={13} /> {catsitter.availableTime}
+          </Text>
+        </View>
+        <Text >Cat Sitter Address: {catsitter.address}</Text >
+        <Text >Cat Sitter Postal Code:{catsitter.postalCode} </Text >
+
+
+        {/* NAME */}
+        <Text style={nameStyle}>{catsitter.name}</Text>
+        <Text >Cat Sitter Age: {catsitter.age}</Text >
+        <Text >Cat Sitter Price Per Night: {catsitter.price}</Text >
 
-    <View style={styles.containerFlatList}>
+        {/* DESCRIPTION */}
+        <Text style={styles.descriptionCardItem}>{catsitter.description}</Text>
 
-      <Text >Cat Sitter Name: {catsitter.name}</Text >
-      <Text >Cat Sitter Address: {catsitter.address}</Text >
-      <Text >Cat Sitter Available Time: {catsitter.availableTime}</Text >
-      <Text >Cat Sitter Postal Code:{catsitter.postalCode} </Text >
-      <Text >Cat Sitter Age: {catsitter.age}</Text >
-      <Text >Cat Sitter Price Per Night: {catsitter.price}</Text >
-      <Text >Cat Sitter Status:
-        {(() => {
-          switch (catsitter.isOpen) {
-            case true: return " Open";
-            case "false": return " Closed";
-            default: return " Closed";
-          }
-        })()}
-      </Text >
-      <Text >Cat Sitter Information: {catsitter.description}</Text >
+        {/* STATUS */}
+        <View style={styles.status}>
+          <View style={catsitter.isOpen ? styles.online : styles.offline} />
+          <Text style={styles.statusText}>
+            {catsitter.isOpen ? "Online" : "Offline"}
+          </Text>
+        </View>
 
+        {/* ACTIONS */}
+        <View style={styles.actionsCardItem}>
+          <TouchableOpacity style={styles.button}>
+            <Icon name="mail" color={LIKE_ACTIONS} size={25} />
+          </TouchableOpacity>
 
+          <TouchableOpacity style={styles.button}>
+            <Icon name="close" color={DISLIKE_ACTIONS} size={25} />
+          </TouchableOpacity>
 
-    </View>
+        </View>
+      </View>
+    </>
   );
 };