From a3657e5c2f40db0401877d09e0b39c16f89de9e9 Mon Sep 17 00:00:00 2001
From: mouazkh <mouazalkhatib2013@gmail.com>
Date: Tue, 26 May 2026 19:53:28 +0300
Subject: [PATCH] added a swicher on the properties

---
 app/properties/page.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/properties/page.js b/app/properties/page.js
index 79ad884..b35660a 100644
--- a/app/properties/page.js
+++ b/app/properties/page.js
@@ -489,6 +489,7 @@ const FilterBar = ({ filters, onFilterChange }) => {
 };
 
 export default function PropertiesPage() {
+  const [purposeTab, setPurposeTab] = useState('rent');
   const [viewMode, setViewMode] = useState('grid');
   const [sortBy, setSortBy] = useState('newest');
   const [properties, setProperties] = useState([]);
@@ -517,8 +518,8 @@ export default function PropertiesPage() {
         const saleList = Array.isArray(saleData) ? saleData : [];
 
         const mapped = [
-          ...rentList.map((p, i) => mapApiProperty(p, i)),
-          ...saleList.map((p, i) => mapApiProperty(p, rentList.length + i)),
+          ...rentList.map((p, i) => ({ ...mapApiProperty(p, i), purpose: 'rent' })),
+          ...saleList.map((p, i) => ({ ...mapApiProperty(p, rentList.length + i), purpose: 'sale' })),
         ];
 
         if (mapped.length > 0) {
@@ -535,6 +536,7 @@ export default function PropertiesPage() {
   }, []);
 
   const filteredProperties = properties
+    .filter(p => p.purpose === purposeTab)
     .filter(property => {
       if (filters.search && !property.title.includes(filters.search) && !property.description.includes(filters.search)) {
         return false;
@@ -578,8 +580,22 @@ export default function PropertiesPage() {
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-8"
         >
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">عقارات للإيجار</h1>
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">{purposeTab === 'rent' ? 'عقارات للإيجار' : 'عقارات للبيع'}</h1>
           <p className="text-gray-500">أفضل العقارات في سوريا</p>
+
+          {/* Purpose Toggle */}
+          <div className="flex justify-center mt-4">
+            <div className="inline-flex bg-gray-100 rounded-xl p-1">
+              <button onClick={() => setPurposeTab('rent')}
+                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === 'rent' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
+                للإيجار
+              </button>
+              <button onClick={() => setPurposeTab('sale')}
+                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === 'sale' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
+                للبيع
+              </button>
+            </div>
+          </div>
           {loading && (
             <div className="mt-4">
               <div className="inline-block w-6 h-6 border-2 border-gray-200 border-t-gray-800 rounded-full animate-spin"></div>