import { useNavigate } from 'react-router-dom'; import { Card, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train, ArrowUp, CheckCircle, Calendar, Hammer, XCircle } from 'lucide-react'; import { MeasurementDisplay } from '@/components/ui/measurement-display'; import { Ride } from '@/types/database'; import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils'; interface RideCardProps { ride: Ride; showParkName?: boolean; className?: string; parkSlug?: string; } export function RideCard({ ride, showParkName = true, className, parkSlug }: RideCardProps) { const navigate = useNavigate(); const handleRideClick = () => { const slug = parkSlug || ride.park?.slug; navigate(`/parks/${slug}/rides/${ride.slug}`); }; const getRideIcon = (category: string) => { switch (category) { case 'roller_coaster': return ; case 'water_ride': return ; case 'dark_ride': return ; case 'flat_ride': return ; case 'kiddie_ride': return ; case 'transportation': return ; default: return ; } }; const getStatusColor = (status: string) => { switch (status) { case 'operating': return 'bg-green-500/50 text-green-200 border-green-500/50'; case 'seasonal': return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50'; case 'under_construction': return 'bg-blue-500/50 text-blue-200 border-blue-500/50'; default: return 'bg-red-500/50 text-red-200 border-red-500/50'; } }; const getStatusIcon = (status: string) => { switch (status) { case 'operating': return ; case 'seasonal': return ; case 'under_construction': return ; default: return ; } }; const formatCategory = (category: string) => { return category.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1) ).join(' '); }; return (
{/* Image/Icon Section */}
{(ride.card_image_url || ride.card_image_id || ride.image_url) ? ( {ride.name} ) : (
{getRideIcon(ride.category)}
)} {/* Gradient Overlay */}
{/* Status Badge */} {getStatusIcon(ride.status)} {ride.status.replace('_', ' ').toUpperCase()}
{/* Header */}

{ride.name}

{showParkName && ride.park?.name && (
{ride.park.name}
)}
{/* Stats & Rating */}
{/* Stats Row */} {(Number(ride.max_speed_kmh) > 0 || Number(ride.max_height_meters) > 0 || Number(ride.duration_seconds) > 0) && (
{Number(ride.max_speed_kmh) > 0 && (
)} {Number(ride.max_height_meters) > 0 && (
)} {Number(ride.duration_seconds) > 0 && (
{Math.floor(ride.duration_seconds / 60)}min
)}
)} {/* Rating */} {ride.average_rating > 0 && (
{ride.average_rating.toFixed(1)} {ride.review_count > 0 && ( ({ride.review_count}) )}
)}
); }