Refactor SimilarRides component

src/components/rides/SimilarRides.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { supabase } from '@/integrations/supabase/client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Star } from 'lucide-react';
+import { RideCard } from '@/components/rides/RideCard';
 
 interface SimilarRidesProps {
   currentRideId: string;
@@ -19,6 +19,16 @@ interface SimilarRide {
   image_url: string | null;
   average_rating: number;
   status: string;
+  category: string;
+  description: string | null;
+  max_speed_kmh: number | null;
+  max_height_meters: number | null;
+  duration_seconds: number | null;
+  review_count: number;
+  park: {
+    name: string;
+    slug: string;
+  };
 }
 
 export function SimilarRides({ currentRideId, parkId, parkSlug, category }: SimilarRidesProps) {
@@ -29,7 +39,21 @@ export function SimilarRides({ currentRideId, parkId, parkSlug, category }: Simi
     async function fetchSimilarRides() {
       const { data, error } = await supabase
         .from('rides')
-        .select('id, name, slug, image_url, average_rating, status')
+        .select(`
+          id, 
+          name, 
+          slug, 
+          image_url, 
+          average_rating, 
+          status,
+          category,
+          description,
+          max_speed_kmh,
+          max_height_meters,
+          duration_seconds,
+          review_count,
+          park:parks!inner(name, slug)
+        `)
         .eq('park_id', parkId)
         .eq('category', category)
         .neq('id', currentRideId)
@@ -57,38 +81,11 @@ export function SimilarRides({ currentRideId, parkId, parkSlug, category }: Simi
       <CardContent>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {rides.map((ride) => (
-            <Link
+            <RideCard 
               key={ride.id} 
-              to={`/parks/${parkSlug}/rides/${ride.slug}`}
+              ride={ride as any} 
-              className="group block"
+              showParkName={false}
-            >
-              <div className="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
-                {ride.image_url ? (
-                  <div className="aspect-video overflow-hidden">
-                    <img
-                      src={ride.image_url}
-                      alt={ride.name}
-                      className="w-full h-full object-cover group-hover:scale-105 transition-transform"
             />
-                  </div>
-                ) : (
-                  <div className="aspect-video bg-accent flex items-center justify-center">
-                    <span className="text-muted-foreground">No image</span>
-                  </div>
-                )}
-                <div className="p-3">
-                  <h4 className="font-medium mb-1 group-hover:text-primary transition-colors">
-                    {ride.name}
-                  </h4>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
-                    <span>{ride.average_rating.toFixed(1)}</span>
-                    <span className="text-muted-foreground">•</span>
-                    <span className="text-muted-foreground capitalize">{ride.status}</span>
-                  </div>
-                </div>
-              </div>
-            </Link>
           ))}
         </div>
         <div className="mt-4 text-center">