From 0bba766b4b89fdf841b93e46f567c1d20cdaba7f 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:31:07 +0000
Subject: [PATCH] Refactor: Update ParkDetail with RideCard

---
 src/pages/ParkDetail.tsx | 143 +++++----------------------------------
 1 file changed, 17 insertions(+), 126 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index c0ef8a0e..9f184211 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -6,9 +6,9 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Separator } from '@/components/ui/separator';
-import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Theater, Train } from 'lucide-react';
+import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
-import { MeasurementDisplay } from '@/components/ui/measurement-display';
+import { RideCard } from '@/components/rides/RideCard';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 export default function ParkDetail() {
@@ -81,24 +81,6 @@ export default function ParkDetail() {
   const formatParkType = (type: string) => {
     return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
   };
-  const getRideIcon = (category: string) => {
-    switch (category) {
-      case 'roller_coaster':
-        return <FerrisWheel className="w-5 h-5" />;
-      case 'water_ride':
-        return <Waves className="w-5 h-5" />;
-      case 'dark_ride':
-        return <Theater className="w-5 h-5" />;
-      case 'flat_ride':
-        return <FerrisWheel className="w-5 h-5" />;
-      case 'kiddie_ride':
-        return <FerrisWheel className="w-5 h-5" />;
-      case 'transportation':
-        return <Train className="w-5 h-5" />;
-      default:
-        return <FerrisWheel className="w-5 h-5" />;
-    }
-  };
   if (loading) {
     return <div className="min-h-screen bg-background">
         <Header />
@@ -283,26 +265,21 @@ export default function ParkDetail() {
                     </CardContent>
                   </Card>}
 
-                {/* Top Rides Preview */}
+                {/* Featured Rides */}
                 <Card>
                   <CardHeader>
                     <CardTitle>Featured Rides</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid md:grid-cols-2 gap-4">
-                      {rides.slice(0, 4).map(ride => <div key={ride.id} className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors" onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}>
-                          <div className="flex items-center">{getRideIcon(ride.category)}</div>
-                          <div className="flex-1">
-                            <h4 className="font-medium">{ride.name}</h4>
-                            <p className="text-sm text-muted-foreground">
-                              {ride.category.replace('_', ' ')}
-                            </p>
-                          </div>
-                          {ride.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">{ride.average_rating.toFixed(1)}</span>
-                            </div>}
-                        </div>)}
+                    <div className="grid sm:grid-cols-2 gap-4">
+                      {rides.slice(0, 4).map(ride => (
+                        <RideCard 
+                          key={ride.id} 
+                          ride={ride} 
+                          showParkName={false}
+                          className="h-full"
+                        />
+                      ))}
                     </div>
                   </CardContent>
                 </Card>
@@ -372,99 +349,13 @@ export default function ParkDetail() {
           </TabsContent>
 
           <TabsContent value="rides" className="mt-6">
-            <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {rides.map(ride => (
-                <Card 
+                <RideCard 
                   key={ride.id} 
-                  className="group overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer border-0 bg-gradient-to-br from-card via-card/95 to-card/90 backdrop-blur-sm"
-                  onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
-                >
-                  <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/15 to-accent/10 relative overflow-hidden">
-                    {ride.image_url ? (
-                      <img 
-                        src={ride.image_url} 
-                        alt={ride.name}
-                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                      />
-                    ) : (
-                      <div className="flex items-center justify-center h-full">
-                        <div className="opacity-40 group-hover:opacity-60 transition-opacity">
-                          {getRideIcon(ride.category)}
-                        </div>
-                      </div>
-                    )}
-                    
-                    {/* Status Badge */}
-                    <div className="absolute top-3 right-3">
-                      <Badge 
-                        variant="secondary" 
-                        className={`text-xs font-medium ${
-                          ride.status === 'operating' 
-                            ? 'bg-green-500/20 text-green-400 border-green-500/30' 
-                            : ride.status === 'closed' 
-                            ? 'bg-red-500/20 text-red-400 border-red-500/30'
-                            : 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
-                        }`}
-                      >
-                        {ride.status}
-                      </Badge>
-                    </div>
-
-                    {/* Rating */}
-                    {ride.average_rating > 0 && (
-                      <div className="absolute bottom-3 right-3 bg-black/50 backdrop-blur-sm rounded-lg px-2 py-1">
-                        <div className="flex items-center gap-1">
-                          <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
-                          <span className="text-white text-xs font-medium">
-                            {ride.average_rating.toFixed(1)}
-                          </span>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  <CardContent className="p-3">
-                    <div className="space-y-2">
-                      {/* Title and Category */}
-                      <div>
-                        <h3 className="font-semibold text-lg group-hover:text-primary transition-colors line-clamp-1">
-                          {ride.name}
-                        </h3>
-                        <div className="mt-1">
-                          <p className="text-sm text-muted-foreground capitalize">
-                            {ride.category.replace('_', ' ')}
-                          </p>
-                        </div>
-                      </div>
-
-                      {/* Description */}
-                      {ride.description && (
-                        <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
-                          {ride.description}
-                        </p>
-                      )}
-
-                       {/* Stats */}
-                       <div className="flex items-center gap-2 flex-wrap">
-                         {ride.max_speed_kmh && ride.max_speed_kmh > 0 && (
-                           <span className="bg-primary/10 text-primary px-2 py-1 rounded-md text-xs font-medium">
-                             <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
-                           </span>
-                         )}
-                         {ride.max_height_meters && ride.max_height_meters > 0 && (
-                           <span className="bg-accent/10 text-accent px-2 py-1 rounded-md text-xs font-medium">
-                             <MeasurementDisplay value={ride.max_height_meters} type="distance" />
-                           </span>
-                         )}
-                         {ride.inversions > 0 && (
-                           <span className="bg-secondary/10 text-secondary px-2 py-1 rounded-md text-xs font-medium">
-                             {ride.inversions} inversions
-                           </span>
-                         )}
-                       </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                  ride={ride} 
+                  showParkName={false}
+                />
               ))}
             </div>
           </TabsContent>