From 5435bb1fbdd76614ec077c375a2b30c473d87f85 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 12:56:34 +0000
Subject: [PATCH] Visual edit in Lovable

---
 src/components/parks/ParkCard.tsx | 89 ++++++++++++-------------------
 1 file changed, 35 insertions(+), 54 deletions(-)

diff --git a/src/components/parks/ParkCard.tsx b/src/components/parks/ParkCard.tsx
index 7cffe234..b04c4415 100644
--- a/src/components/parks/ParkCard.tsx
+++ b/src/components/parks/ParkCard.tsx
@@ -3,65 +3,56 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Park } from '@/types/database';
-
 interface ParkCardProps {
   park: Park;
   onClick?: () => void;
 }
-
-export function ParkCard({ park, onClick }: ParkCardProps) {
+export function ParkCard({
+  park,
+  onClick
+}: ParkCardProps) {
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
-      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
-      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
-      default: return 'bg-red-500/20 text-red-400 border-red-500/30';
+      case 'operating':
+        return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'seasonal':
+        return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'under_construction':
+        return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      default:
+        return 'bg-red-500/20 text-red-400 border-red-500/30';
     }
   };
-
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return <Castle className="w-5 h-5" />;
-      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
-      case 'water_park': return <Waves className="w-5 h-5" />;
-      case 'family_entertainment': return <Tent className="w-5 h-5" />;
-      default: return <FerrisWheel className="w-5 h-5" />;
+      case 'theme_park':
+        return;
+      case 'amusement_park':
+        return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park':
+        return <Waves className="w-5 h-5" />;
+      case 'family_entertainment':
+        return <Tent className="w-5 h-5" />;
+      default:
+        return <FerrisWheel className="w-5 h-5" />;
     }
   };
-
   const formatParkType = (type: string) => {
-    return type.split('_').map(word => 
-      word.charAt(0).toUpperCase() + word.slice(1)
-    ).join(' ');
+    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
   };
-
-  return (
-    <Card 
-      className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
-      onClick={onClick}
-    >
+  return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={onClick}>
       <div className="relative overflow-hidden">
         {/* Image Placeholder with Gradient */}
         <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
-          {park.card_image_url ? (
-            <img 
-              src={park.card_image_url} 
-              alt={park.name}
-              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-            />
-          ) : (
-            <div className="opacity-50 flex items-center justify-center">
+          {park.card_image_url ? <img src={park.card_image_url} alt={park.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" /> : <div className="opacity-50 flex items-center justify-center">
               {getParkTypeIcon(park.park_type)}
-            </div>
-          )}
+            </div>}
           
           {/* Gradient Overlay */}
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
           
           {/* Status Badge */}
-          <Badge 
-            className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}
-          >
+          <Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}>
             {park.status.replace('_', ' ').toUpperCase()}
           </Badge>
         </div>
@@ -76,20 +67,16 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               {getParkTypeIcon(park.park_type)}
             </div>
             
-            {park.location && (
-              <div className="flex items-center text-sm text-muted-foreground">
+            {park.location && <div className="flex items-center text-sm text-muted-foreground">
                 <MapPin className="w-3 h-3 mr-1" />
                 {park.location.city && `${park.location.city}, `}{park.location.country}
-              </div>
-            )}
+              </div>}
           </div>
 
           {/* Description */}
-          {park.description && (
-            <p className="text-sm text-muted-foreground line-clamp-2">
+          {park.description && <p className="text-sm text-muted-foreground line-clamp-2">
               {park.description}
-            </p>
-          )}
+            </p>}
 
           {/* Park Type */}
           <Badge variant="outline" className="text-xs">
@@ -109,24 +96,18 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               </div>
             </div>
             
-            {park.average_rating > 0 && (
-              <div className="flex items-center gap-1">
+            {park.average_rating > 0 && <div className="flex items-center gap-1">
                 <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                 <span className="text-sm font-medium">{park.average_rating.toFixed(1)}</span>
                 <span className="text-xs text-muted-foreground">({park.review_count})</span>
-              </div>
-            )}
+              </div>}
           </div>
 
           {/* Action Button */}
-          <Button 
-            className="w-full mt-3 bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
-            size="sm"
-          >
+          <Button className="w-full mt-3 bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300" size="sm">
             Explore Park
           </Button>
         </CardContent>
       </div>
-    </Card>
-  );
+    </Card>;
 }
\ No newline at end of file