Refactor code to address issues

src/pages/ParkRides.tsx

@@ -17,6 +17,7 @@ import { toast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function ParkRides() {
   const { parkSlug } = useParams<{ parkSlug: string }>();
@@ -150,6 +151,17 @@ export default function ParkRides() {
     ride.manufacturer?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: park ? `${park.name} - Rides & Attractions` : 'Park Rides',
+    description: park 
+      ? `Explore ${filteredRides.length} rides and attractions at ${park.name}` 
+      : undefined,
+    imageUrl: park?.banner_image_url || filteredRides[0]?.banner_image_url,
+    imageId: park?.banner_image_id || filteredRides[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!park && !loading
+  });
+
   const categories = [
     { value: 'all', label: 'All Categories' },
     { value: 'roller_coaster', label: 'Roller Coasters' },