feat: create display comment post component

src/components/ForumPost/Comment.tsx

+import React from "react";
+import { Text, StyleSheet, View, Image } from "react-native";
+import Colors from "../../constants/Colors";
+import Spacer from "../../components/Spacer/Spacer";
+import { IThreadComment } from "../../types/firestore/threadComment";
+import { useEffect, useState } from "react";
+import { getUser } from "../../service/firestore/user";
+import { IUser } from "../../types/firestore/User";
+
+type props = {
+  item: IThreadComment;
+};
+
+const Comment = ({ item }: props) => {
+  const [userName, setUserName] = useState("");
+  const [userPic, setUserPic] = useState("");
+
+  useEffect(() => {
+    getUser(item.userId).then((res) => {
+      const data = res.data() as IUser;
+      setUserName(data.firstName + " " + data.lastName);
+      setUserPic(data.pic);
+    });
+  }, []);
+
+  const formatDate = () => {
+    const date = item.timestamp.toDate();
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    return `${day} - ${month} - ${year}`;
+  };
+
+  return (
+    <View testID="Card">
+      <View style={styles.container} testID="Container">
+        <View style={styles.cardWrapper} testID="Wrapper">
+          <View style={styles.profileWrapper} testID="Profile Wrapper">
+            <Image
+              style={styles.profilePic}
+              source={{ uri: userPic }}
+              testID="Profile Picture"
+            />
+            <View style={styles.textWrapper} testID="Text Wrapper">
+              <Text style={styles.memberName} testID="Member Name">
+                {userName}
+              </Text>
+              <Spacer variant={"s"} />
+              <Text style={styles.timeStamp} testID="Time Stamp">
+                {formatDate()}
+              </Text>
+            </View>
+          </View>
+          <Spacer variant={"l"} />
+          <View style={styles.textWrapper} testID="Body Wrapper">
+            <Text style={styles.comment} testID="Comment">
+              {item.content}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+export default Comment;
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    borderRadius: 8,
+    elevation: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Colors.background,
+  },
+  cardWrapper: {
+    width: "100%",
+    padding: 8,
+  },
+  profileWrapper: {
+    width: "100%",
+    flexDirection: "row",
+    paddingTop: 8,
+  },
+  profilePic: {
+    width: 48,
+    height: 48,
+    borderRadius: 100,
+  },
+  textWrapper: {
+    width: "100%",
+    marginTop: 4,
+    paddingLeft: 8,
+  },
+  memberName: {
+    color: Colors.text.subtitle,
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  timeStamp: {
+    color: Colors.text.disabled,
+    fontSize: 12,
+  },
+  comment: {
+    color: Colors.text.body,
+    fontSize: 14,
+  },
+});