From efaec2e1c825fa919ab3034033545e2e93f49c3c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:07:33 +0000
Subject: [PATCH] Refactor: Redesign park detail page

---
 src/pages/ParkDetail.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index f89e646b..59da5712 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -278,17 +278,22 @@ export default function ParkDetail() {
               </Card>
             </div>
 
-            {/* Park Type */}
+            {/* Operating Status */}
             <div className="group relative overflow-hidden">
               <Card className="h-full border-0 bg-gradient-to-br from-muted/20 via-muted/10 to-transparent hover:shadow-lg hover:shadow-muted/15 transition-all duration-300 hover:scale-[1.02]">
                 <CardContent className="p-4 text-center relative">
                   <div className="flex items-center justify-center mb-2 group-hover:scale-105 transition-transform">
                     <div className="p-2 rounded-full bg-gradient-to-br from-primary/20 to-accent/20">
-                      {getParkTypeIcon(park.park_type)}
+                      {park.opening_date ? <Calendar className="w-5 h-5" /> : <Clock className="w-5 h-5" />}
                     </div>
                   </div>
-                  <div className="text-xs font-medium text-foreground">{formatParkType(park.park_type)}</div>
-                  <div className="text-xs text-muted-foreground mt-0.5">Park Type</div>
+                  <div className="text-xs font-medium text-foreground">
+                    {park.opening_date 
+                      ? `Opened ${new Date(park.opening_date).getFullYear()}`
+                      : 'Opening Soon'
+                    }
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-0.5">Since</div>
                 </CardContent>
               </Card>
             </div>