From 2d3a5d6f9fedf43891314749dd38a59299067d2f Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 15 Jul 2024 08:05:18 -0400
Subject: [PATCH] Display message cards

---
 app/messages/page.jsx      |  3 ++-
 components/MessageCard.jsx | 40 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 components/MessageCard.jsx

diff --git a/app/messages/page.jsx b/app/messages/page.jsx
index 49a86af..8f4f88e 100644
--- a/app/messages/page.jsx
+++ b/app/messages/page.jsx
@@ -1,5 +1,6 @@
 import connectDB from '@/config/database';
 import Message from '@/models/Message';
+import MessageCard from '@/components/MessageCard';
 import '@/models/Property';
 import { convertToSerializeableObject } from '@/utils/convertToObject';
 import { getSessionUser } from '@/utils/getSessionUser';
@@ -45,7 +46,7 @@ const MessagePage = async () => {
               <p>You have no messages</p>
             ) : (
               messages.map((message) => (
-                <h3 key={message._id}>{message.name}</h3>
+                <MessageCard key={message._id} message={message} />
               ))
             )}
           </div>
diff --git a/components/MessageCard.jsx b/components/MessageCard.jsx
new file mode 100644
index 0000000..8e1da26
--- /dev/null
+++ b/components/MessageCard.jsx
@@ -0,0 +1,40 @@
+'use client';
+
+const MessageCard = ({ message }) => {
+  return (
+    <div className='relative bg-white p-4 rounded-md shadow-md border border-gray-200'>
+      <h2 className='text-xl mb-4'>
+        <span className='font-bold'>Property Inquiry:</span>{' '}
+        {message.property.name}
+      </h2>
+      <p className='text-gray-700'>{message.body}</p>
+
+      <ul className='mt-4'>
+        <li>
+          <strong>Reply Email:</strong>{' '}
+          <a href={`mailto:${message.email}`} className='text-blue-500'>
+            {message.email}
+          </a>
+        </li>
+        <li>
+          <strong>Reply Phone:</strong>{' '}
+          <a href={`tel:${message.phone}`} className='text-blue-500'>
+            {message.phone}
+          </a>
+        </li>
+        <li>
+          <strong>Received:</strong>{' '}
+          {new Date(message.createdAt).toLocaleString()}
+        </li>
+      </ul>
+      <button className='mt-4 mr-3 bg-blue-500 text-white py-1 px-3 rounded-md'>
+        Mark As Read
+      </button>
+      <button className='mt-4 bg-red-500 text-white py-1 px-3 rounded-md'>
+        Delete
+      </button>
+    </div>
+  );
+};
+
+export default MessageCard;