Display message cards

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>

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;