feat: Implement Phase 3 plan

src/components/rides/SimilarRides.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useState } from 'react';
 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 { RideCard } from '@/components/rides/RideCard';
+import { useSimilarRides } from '@/hooks/rides/useSimilarRides';
 
 interface SimilarRidesProps {
   currentRideId: string;
@@ -32,44 +31,9 @@ interface SimilarRide {
 }
 
 export function SimilarRides({ currentRideId, parkId, parkSlug, category }: SimilarRidesProps) {
-  const [rides, setRides] = useState<SimilarRide[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: rides, isLoading } = useSimilarRides(currentRideId, parkId, category);
 
-  useEffect(() => {
-    async function fetchSimilarRides() {
-      const { data, error } = await supabase
-        .from('rides')
-        .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)
-        .order('average_rating', { ascending: false })
-        .limit(4);
-
-      if (!error && data) {
-        setRides(data);
-      }
-      setLoading(false);
-    }
-
-    fetchSimilarRides();
-  }, [currentRideId, parkId, category]);
-
-  if (loading || rides.length === 0) {
+  if (isLoading || !rides || rides.length === 0) {
     return null;
   }