@mmapp/react-compiler 0.1.0-alpha.1

package/examples/uber-app/components/DriverCard.tsx

@@ -0,0 +1,176 @@
+/**
+ * DriverCard — Driver info display with vehicle details and real-time status
+ */
+
+import React from 'react';
+import { Stack, Row, Text, Badge, Icon, Image } from '@mindmatrix/react';
+
+interface DriverCardProps {
+  name: string;
+  avatarUrl?: string;
+  rating: number;
+  totalTrips: number;
+  vehicleMake: string;
+  vehicleModel: string;
+  vehicleColor: string;
+  licensePlate: string;
+  vehicleType: string;
+  etaMinutes?: number;
+  isOnline?: boolean;
+  phone?: string;
+  onCall?: () => void;
+  onMessage?: () => void;
+  onCancel?: () => void;
+  compact?: boolean;
+}
+
+export function DriverCard({
+  name,
+  avatarUrl,
+  rating,
+  totalTrips,
+  vehicleMake,
+  vehicleModel,
+  vehicleColor,
+  licensePlate,
+  vehicleType,
+  etaMinutes,
+  isOnline,
+  phone,
+  onCall,
+  onMessage,
+  onCancel,
+  compact = false,
+}: DriverCardProps) {
+  if (compact) {
+    return (
+      <Row sx={{ bg: '#1a202c', borderRadius: 'lg', p: 3, gap: 3, alignItems: 'center', border: '1px solid #2d3748' }}>
+        <Stack sx={{ position: 'relative' }}>
+          <Stack sx={{ width: 12, height: 12, borderRadius: 'full', bg: '#2d3748', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
+            {avatarUrl
+              ? <Image src={avatarUrl} sx={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              : <Icon name="user" sx={{ color: '#a0aec0', fontSize: 'xl' }} />
+            }
+          </Stack>
+          {isOnline !== undefined && (
+            <Stack sx={{
+              position: 'absolute', bottom: 0, right: 0,
+              width: 3, height: 3, borderRadius: 'full',
+              bg: isOnline ? '#48bb78' : '#718096',
+              border: '2px solid #1a202c',
+            }} />
+          )}
+        </Stack>
+        <Stack sx={{ flex: 1 }}>
+          <Text sx={{ color: '#e2e8f0', fontWeight: 'bold', fontSize: 'sm' }}>{name}</Text>
+          <Row sx={{ gap: 1, alignItems: 'center' }}>
+            <Icon name="star" sx={{ color: '#ecc94b', fontSize: 'xs' }} />
+            <Text sx={{ color: '#a0aec0', fontSize: 'xs' }}>{rating.toFixed(1)}</Text>
+            <Text sx={{ color: '#4a5568', fontSize: 'xs' }}>|</Text>
+            <Text sx={{ color: '#a0aec0', fontSize: 'xs' }}>{vehicleColor} {vehicleMake} {vehicleModel}</Text>
+          </Row>
+        </Stack>
+        {etaMinutes !== undefined && (
+          <Stack sx={{ alignItems: 'center' }}>
+            <Text sx={{ color: '#4299e1', fontWeight: 'bold', fontSize: 'lg' }}>{etaMinutes}</Text>
+            <Text sx={{ color: '#718096', fontSize: 'xs' }}>min</Text>
+          </Stack>
+        )}
+      </Row>
+    );
+  }
+
+  return (
+    <Stack sx={{ bg: '#1a202c', borderRadius: 'xl', p: 5, border: '1px solid #2d3748' }}>
+      {/* Avatar + name + rating */}
+      <Row sx={{ gap: 4, alignItems: 'center', mb: 4 }}>
+        <Stack sx={{ position: 'relative' }}>
+          <Stack sx={{ width: 16, height: 16, borderRadius: 'full', bg: '#2d3748', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
+            {avatarUrl
+              ? <Image src={avatarUrl} sx={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              : <Icon name="user" sx={{ color: '#a0aec0', fontSize: '2xl' }} />
+            }
+          </Stack>
+          {isOnline !== undefined && (
+            <Stack sx={{
+              position: 'absolute', bottom: 1, right: 1,
+              width: 4, height: 4, borderRadius: 'full',
+              bg: isOnline ? '#48bb78' : '#718096',
+              border: '2px solid #1a202c',
+            }} />
+          )}
+        </Stack>
+        <Stack sx={{ flex: 1 }}>
+          <Text sx={{ color: '#e2e8f0', fontWeight: 'bold', fontSize: 'xl' }}>{name}</Text>
+          <Row sx={{ gap: 3, mt: 1 }}>
+            <Row sx={{ gap: 1, alignItems: 'center' }}>
+              <Icon name="star" sx={{ color: '#ecc94b' }} />
+              <Text sx={{ color: '#e2e8f0', fontWeight: 600 }}>{rating.toFixed(1)}</Text>
+            </Row>
+            <Text sx={{ color: '#718096' }}>|</Text>
+            <Text sx={{ color: '#a0aec0' }}>{totalTrips.toLocaleString()} trips</Text>
+          </Row>
+        </Stack>
+        {etaMinutes !== undefined && (
+          <Stack sx={{ alignItems: 'center', bg: '#2d3748', px: 4, py: 2, borderRadius: 'lg' }}>
+            <Text sx={{ color: '#4299e1', fontWeight: 'bold', fontSize: '2xl' }}>{etaMinutes}</Text>
+            <Text sx={{ color: '#718096', fontSize: 'xs' }}>min away</Text>
+          </Stack>
+        )}
+      </Row>
+
+      {/* Vehicle info */}
+      <Stack sx={{ bg: '#2d3748', borderRadius: 'lg', p: 3, mb: 4 }}>
+        <Row sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Stack>
+            <Text sx={{ color: '#a0aec0', fontSize: 'xs', mb: 1 }}>Vehicle</Text>
+            <Text sx={{ color: '#e2e8f0', fontWeight: 500 }}>
+              {vehicleColor} {vehicleMake} {vehicleModel}
+            </Text>
+          </Stack>
+          <Stack sx={{ alignItems: 'flex-end' }}>
+            <Badge sx={{ bg: '#4a5568', color: '#e2e8f0', px: 3, py: 1, borderRadius: 'md', fontSize: 'sm', fontWeight: 'bold', letterSpacing: '1px' }}>
+              {licensePlate}
+            </Badge>
+            <Badge sx={{ mt: 1, bg: '#2d3748', border: '1px solid #4a5568', color: '#a0aec0', px: 2, py: 0.5, borderRadius: 'md', fontSize: 'xs', textTransform: 'capitalize' }}>
+              {vehicleType}
+            </Badge>
+          </Stack>
+        </Row>
+      </Stack>
+
+      {/* Action buttons */}
+      <Row sx={{ gap: 3 }}>
+        {onCall && (
+          <Stack
+            onClick={onCall}
+            sx={{ flex: 1, alignItems: 'center', bg: '#2d3748', py: 3, borderRadius: 'lg', cursor: 'pointer', _hover: { bg: '#4a5568' } }}
+          >
+            <Icon name="phone" sx={{ color: '#48bb78', mb: 1 }} />
+            <Text sx={{ color: '#a0aec0', fontSize: 'xs' }}>Call</Text>
+          </Stack>
+        )}
+        {onMessage && (
+          <Stack
+            onClick={onMessage}
+            sx={{ flex: 1, alignItems: 'center', bg: '#2d3748', py: 3, borderRadius: 'lg', cursor: 'pointer', _hover: { bg: '#4a5568' } }}
+          >
+            <Icon name="message" sx={{ color: '#4299e1', mb: 1 }} />
+            <Text sx={{ color: '#a0aec0', fontSize: 'xs' }}>Message</Text>
+          </Stack>
+        )}
+        {onCancel && (
+          <Stack
+            onClick={onCancel}
+            sx={{ flex: 1, alignItems: 'center', bg: '#2d3748', py: 3, borderRadius: 'lg', cursor: 'pointer', _hover: { bg: '#4a5568' } }}
+          >
+            <Icon name="x" sx={{ color: '#f56565', mb: 1 }} />
+            <Text sx={{ color: '#a0aec0', fontSize: 'xs' }}>Cancel</Text>
+          </Stack>
+        )}
+      </Row>
+    </Stack>
+  );
+}
+
+export default DriverCard;

package/examples/uber-app/components/MapView.tsx

@@ -0,0 +1,216 @@
+/**
+ * MapView — Interactive map component with markers, routes, and live tracking
+ * Uses useMapView + useGeolocation from @mindmatrix/react
+ */
+
+import React, { useState } from 'react';
+import { useMapView, useGeolocation, useOnChange } from '@mindmatrix/react';
+import { Stack, Row, Text, Badge, Button, Icon } from '@mindmatrix/react';
+
+interface MapMarkerConfig {
+  id: string;
+  position: { lat: number; lng: number };
+  label?: string;
+  icon?: 'pickup' | 'dropoff' | 'driver' | 'surge';
+}
+
+interface MapViewProps {
+  pickupLocation?: { lat: number; lng: number; address: string };
+  dropoffLocation?: { lat: number; lng: number; address: string };
+  driverLocation?: { lat: number; lng: number; heading: number };
+  routePolyline?: string;
+  surgeZones?: Array<{ lat: number; lng: number; multiplier: number; radius: number }>;
+  showTraffic?: boolean;
+  trackUser?: boolean;
+  onLocationSelect?: (lat: number, lng: number, address: string) => void;
+  onMapReady?: () => void;
+  style?: Record<string, unknown>;
+}
+
+export function MapView({
+  pickupLocation,
+  dropoffLocation,
+  driverLocation,
+  routePolyline,
+  surgeZones = [],
+  showTraffic = false,
+  trackUser = false,
+  onLocationSelect,
+  style,
+}: MapViewProps) {
+  const [mapMode, setMapMode] = useState<'standard' | 'satellite' | 'terrain'>('standard');
+
+  const map = useMapView({
+    initialCenter: pickupLocation || { lat: 40.7128, lng: -74.006 },
+    initialZoom: 14,
+    minZoom: 10,
+    maxZoom: 20,
+  });
+
+  const geo = useGeolocation({
+    enableHighAccuracy: true,
+    watch: trackUser,
+    enabled: trackUser,
+  });
+
+  // Update markers when locations change
+  useOnChange('pickupLocation', () => {
+    if (pickupLocation) {
+      map.addMarker({
+        id: 'pickup',
+        position: pickupLocation,
+        label: 'Pickup',
+        icon: 'pickup-pin',
+      });
+    }
+  });
+
+  useOnChange('dropoffLocation', () => {
+    if (dropoffLocation) {
+      map.addMarker({
+        id: 'dropoff',
+        position: dropoffLocation,
+        label: 'Drop-off',
+        icon: 'dropoff-pin',
+      });
+      // Fit both markers in view
+      if (pickupLocation) {
+        map.fitBounds([pickupLocation, dropoffLocation], 60);
+      }
+    }
+  });
+
+  useOnChange('driverLocation', () => {
+    if (driverLocation) {
+      map.updateMarker('driver', driverLocation);
+    }
+  });
+
+  const distanceText = pickupLocation && dropoffLocation
+    ? `${(map.distance(pickupLocation, dropoffLocation) / 1000).toFixed(1)} km`
+    : '';
+
+  return (
+    <Stack sx={{ position: 'relative', width: '100%', height: '100%', bg: '#1a1a2e', borderRadius: 'lg', overflow: 'hidden', ...style }}>
+      {/* Map canvas placeholder — in production, renders Mapbox/Google Maps */}
+      <Stack sx={{ flex: 1, alignItems: 'center', justifyContent: 'center', bg: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' }}>
+        <Icon name="map" sx={{ fontSize: '64px', color: '#4a5568', mb: 2 }} />
+        <Text sx={{ color: '#718096', fontSize: 'sm' }}>Map View</Text>
+        <Text sx={{ color: '#4a5568', fontSize: 'xs' }}>
+          Center: {map.center.lat.toFixed(4)}, {map.center.lng.toFixed(4)} | Zoom: {map.zoom}
+        </Text>
+        {distanceText && (
+          <Badge sx={{ mt: 2, bg: '#2d3748', color: '#e2e8f0', px: 3, py: 1 }}>
+            {distanceText} straight-line
+          </Badge>
+        )}
+      </Stack>
+
+      {/* Pickup marker overlay */}
+      {pickupLocation && (
+        <Stack sx={{ position: 'absolute', top: '30%', left: '40%', alignItems: 'center' }}>
+          <Stack sx={{ width: 12, height: 12, borderRadius: 'full', bg: '#48bb78', border: '3px solid white', boxShadow: 'lg' }} />
+          <Text sx={{ fontSize: 'xs', color: 'white', bg: 'rgba(0,0,0,0.7)', px: 2, py: 0.5, borderRadius: 'sm', mt: 1 }}>
+            {pickupLocation.address || 'Pickup'}
+          </Text>
+        </Stack>
+      )}
+
+      {/* Dropoff marker overlay */}
+      {dropoffLocation && (
+        <Stack sx={{ position: 'absolute', top: '60%', right: '30%', alignItems: 'center' }}>
+          <Stack sx={{ width: 12, height: 12, borderRadius: 'full', bg: '#f56565', border: '3px solid white', boxShadow: 'lg' }} />
+          <Text sx={{ fontSize: 'xs', color: 'white', bg: 'rgba(0,0,0,0.7)', px: 2, py: 0.5, borderRadius: 'sm', mt: 1 }}>
+            {dropoffLocation.address || 'Drop-off'}
+          </Text>
+        </Stack>
+      )}
+
+      {/* Driver marker overlay */}
+      {driverLocation && (
+        <Stack sx={{
+          position: 'absolute', top: '45%', left: '35%',
+          transform: `rotate(${driverLocation.heading}deg)`,
+        }}>
+          <Stack sx={{ width: 10, height: 10, borderRadius: 'full', bg: '#4299e1', border: '2px solid white', boxShadow: 'lg' }}>
+            <Icon name="car" sx={{ color: 'white', fontSize: 'xs' }} />
+          </Stack>
+        </Stack>
+      )}
+
+      {/* Surge zone overlays */}
+      {surgeZones.map((zone, i) => (
+        <Stack
+          key={`surge-${i}`}
+          sx={{
+            position: 'absolute',
+            width: `${zone.radius / 50}px`,
+            height: `${zone.radius / 50}px`,
+            borderRadius: 'full',
+            bg: 'rgba(255, 165, 0, 0.15)',
+            border: '2px solid rgba(255, 165, 0, 0.4)',
+            top: `${30 + i * 15}%`,
+            left: `${20 + i * 20}%`,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text sx={{ fontSize: 'xs', fontWeight: 'bold', color: '#ed8936' }}>
+            {zone.multiplier}x
+          </Text>
+        </Stack>
+      ))}
+
+      {/* Controls overlay */}
+      <Row sx={{ position: 'absolute', top: 3, right: 3, gap: 1 }}>
+        <Button
+          onClick={() => geo.getCurrentPosition()}
+          sx={{ bg: 'rgba(0,0,0,0.6)', color: 'white', p: 2, borderRadius: 'full', fontSize: 'sm' }}
+        >
+          <Icon name="crosshair" />
+        </Button>
+        <Button
+          onClick={() => map.setZoom(map.zoom + 1)}
+          sx={{ bg: 'rgba(0,0,0,0.6)', color: 'white', p: 2, borderRadius: 'full', fontSize: 'sm' }}
+        >
+          +
+        </Button>
+        <Button
+          onClick={() => map.setZoom(map.zoom - 1)}
+          sx={{ bg: 'rgba(0,0,0,0.6)', color: 'white', p: 2, borderRadius: 'full', fontSize: 'sm' }}
+        >
+          -
+        </Button>
+      </Row>
+
+      {/* Map mode toggle */}
+      <Row sx={{ position: 'absolute', bottom: 3, left: 3, gap: 1 }}>
+        {(['standard', 'satellite', 'terrain'] as const).map((mode) => (
+          <Button
+            key={mode}
+            onClick={() => setMapMode(mode)}
+            sx={{
+              bg: mapMode === mode ? '#4299e1' : 'rgba(0,0,0,0.6)',
+              color: 'white',
+              px: 2,
+              py: 1,
+              borderRadius: 'md',
+              fontSize: 'xs',
+              textTransform: 'capitalize',
+            }}
+          >
+            {mode}
+          </Button>
+        ))}
+      </Row>
+
+      {showTraffic && (
+        <Badge sx={{ position: 'absolute', bottom: 3, right: 3, bg: '#ed8936', color: 'white', fontSize: 'xs' }}>
+          Traffic ON
+        </Badge>
+      )}
+    </Stack>
+  );
+}
+
+export default MapView;

package/examples/uber-app/components/RatingStars.tsx

@@ -0,0 +1,227 @@
+/**
+ * RatingStars — Interactive star rating widget with tags, tip selector, and submission
+ */
+
+import React, { useState } from 'react';
+import { useForm, useToast } from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Icon, Badge, TextInput } from '@mindmatrix/react';
+
+interface RatingStarsProps {
+  maxStars?: number;
+  rideId: string;
+  targetName: string;
+  targetRole: 'rider' | 'driver';
+  fare?: number;
+  showTip?: boolean;
+  onSubmit: (rating: { stars: number; comment: string; tags: string[]; tipAmount: number }) => void;
+  onSkip?: () => void;
+}
+
+const RIDER_TAGS = ['Clean car', 'Great conversation', 'Smooth driving', 'Good music', 'Knew the route', 'Professional'];
+const DRIVER_TAGS = ['Respectful', 'On time', 'Good directions', 'Friendly', 'Clean passenger'];
+const TIP_OPTIONS = [0, 2, 5, 10];
+
+export function RatingStars({
+  maxStars = 5,
+  rideId,
+  targetName,
+  targetRole,
+  fare,
+  showTip = false,
+  onSubmit,
+  onSkip,
+}: RatingStarsProps) {
+  const [hoveredStar, setHoveredStar] = useState(0);
+  const [selectedStars, setSelectedStars] = useState(0);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [comment, setComment] = useState('');
+  const [tipAmount, setTipAmount] = useState(0);
+  const [customTip, setCustomTip] = useState('');
+  const [showCustomTip, setShowCustomTip] = useState(false);
+  const { toast } = useToast();
+
+  const tags = targetRole === 'driver' ? RIDER_TAGS : DRIVER_TAGS;
+
+  const handleTagToggle = (tag: string) => {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+  };
+
+  const handleSubmit = () => {
+    if (selectedStars === 0) {
+      toast({ title: 'Please select a rating', variant: 'warning', duration: 3000 });
+      return;
+    }
+    const finalTip = showCustomTip ? parseFloat(customTip) || 0 : tipAmount;
+    onSubmit({ stars: selectedStars, comment, tags: selectedTags, tipAmount: finalTip });
+    toast({ title: 'Rating submitted!', variant: 'success', duration: 3000 });
+  };
+
+  const starLabel = selectedStars === 1 ? 'Poor' : selectedStars === 2 ? 'Fair' : selectedStars === 3 ? 'Good' : selectedStars === 4 ? 'Great' : selectedStars === 5 ? 'Excellent' : '';
+
+  return (
+    <Stack sx={{ bg: '#1a202c', borderRadius: 'xl', p: 6, maxWidth: '400px', width: '100%', border: '1px solid #2d3748' }}>
+      {/* Header */}
+      <Stack sx={{ alignItems: 'center', mb: 5 }}>
+        <Text sx={{ color: '#e2e8f0', fontSize: 'xl', fontWeight: 'bold', mb: 1 }}>
+          Rate your {targetRole === 'driver' ? 'ride' : 'passenger'}
+        </Text>
+        <Text sx={{ color: '#a0aec0', fontSize: 'sm' }}>
+          How was your experience with {targetName}?
+        </Text>
+      </Stack>
+
+      {/* Stars */}
+      <Row sx={{ justifyContent: 'center', gap: 2, mb: 2 }}>
+        {Array.from({ length: maxStars }, (_, i) => i + 1).map((star) => (
+          <Stack
+            key={star}
+            onMouseEnter={() => setHoveredStar(star)}
+            onMouseLeave={() => setHoveredStar(0)}
+            onClick={() => setSelectedStars(star)}
+            sx={{
+              cursor: 'pointer',
+              transition: 'transform 0.15s',
+              transform: (hoveredStar >= star || selectedStars >= star) ? 'scale(1.2)' : 'scale(1)',
+            }}
+          >
+            <Icon
+              name="star"
+              sx={{
+                fontSize: '36px',
+                color: (hoveredStar >= star || selectedStars >= star) ? '#ecc94b' : '#4a5568',
+                transition: 'color 0.15s',
+              }}
+            />
+          </Stack>
+        ))}
+      </Row>
+
+      {starLabel && (
+        <Text sx={{ textAlign: 'center', color: '#ecc94b', fontWeight: 600, mb: 4 }}>{starLabel}</Text>
+      )}
+
+      {/* Tags */}
+      {selectedStars > 0 && (
+        <>
+          <Text sx={{ color: '#a0aec0', fontSize: 'sm', mb: 2 }}>What stood out?</Text>
+          <Row sx={{ flexWrap: 'wrap', gap: 2, mb: 4 }}>
+            {tags.map((tag) => (
+              <Badge
+                key={tag}
+                onClick={() => handleTagToggle(tag)}
+                sx={{
+                  px: 3,
+                  py: 1.5,
+                  borderRadius: 'full',
+                  cursor: 'pointer',
+                  fontSize: 'sm',
+                  bg: selectedTags.includes(tag) ? '#4299e1' : '#2d3748',
+                  color: selectedTags.includes(tag) ? 'white' : '#a0aec0',
+                  border: selectedTags.includes(tag) ? '1px solid #4299e1' : '1px solid #4a5568',
+                  transition: 'all 0.15s',
+                }}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </Row>
+
+          {/* Comment */}
+          <TextInput
+            value={comment}
+            onChange={(e: { target: { value: string } }) => setComment(e.target.value)}
+            placeholder="Add a comment (optional)"
+            sx={{ bg: '#2d3748', color: '#e2e8f0', border: '1px solid #4a5568', borderRadius: 'lg', p: 3, mb: 4, fontSize: 'sm', _placeholder: { color: '#718096' } }}
+          />
+        </>
+      )}
+
+      {/* Tip selector */}
+      {showTip && selectedStars > 0 && (
+        <Stack sx={{ mb: 4 }}>
+          <Text sx={{ color: '#a0aec0', fontSize: 'sm', mb: 2 }}>Add a tip for {targetName}</Text>
+          <Row sx={{ gap: 2, mb: 2 }}>
+            {TIP_OPTIONS.map((amount) => (
+              <Button
+                key={amount}
+                onClick={() => { setTipAmount(amount); setShowCustomTip(false); }}
+                sx={{
+                  flex: 1,
+                  py: 2,
+                  borderRadius: 'lg',
+                  fontWeight: 'bold',
+                  bg: tipAmount === amount && !showCustomTip ? '#48bb78' : '#2d3748',
+                  color: tipAmount === amount && !showCustomTip ? 'white' : '#a0aec0',
+                  border: tipAmount === amount && !showCustomTip ? '1px solid #48bb78' : '1px solid #4a5568',
+                }}
+              >
+                {amount === 0 ? 'No tip' : `$${amount}`}
+              </Button>
+            ))}
+            <Button
+              onClick={() => setShowCustomTip(!showCustomTip)}
+              sx={{
+                flex: 1,
+                py: 2,
+                borderRadius: 'lg',
+                bg: showCustomTip ? '#48bb78' : '#2d3748',
+                color: showCustomTip ? 'white' : '#a0aec0',
+                border: showCustomTip ? '1px solid #48bb78' : '1px solid #4a5568',
+              }}
+            >
+              Custom
+            </Button>
+          </Row>
+          {showCustomTip && (
+            <TextInput
+              value={customTip}
+              onChange={(e: { target: { value: string } }) => setCustomTip(e.target.value)}
+              placeholder="Enter amount"
+              sx={{ bg: '#2d3748', color: '#e2e8f0', border: '1px solid #4a5568', borderRadius: 'lg', p: 3, fontSize: 'sm' }}
+            />
+          )}
+        </Stack>
+      )}
+
+      {/* Fare display */}
+      {fare !== undefined && (
+        <Row sx={{ justifyContent: 'space-between', bg: '#2d3748', p: 3, borderRadius: 'lg', mb: 4 }}>
+          <Text sx={{ color: '#a0aec0', fontSize: 'sm' }}>Ride fare</Text>
+          <Text sx={{ color: '#e2e8f0', fontWeight: 'bold' }}>${fare.toFixed(2)}</Text>
+        </Row>
+      )}
+
+      {/* Actions */}
+      <Row sx={{ gap: 3 }}>
+        {onSkip && (
+          <Button
+            onClick={onSkip}
+            sx={{ flex: 1, py: 3, borderRadius: 'lg', bg: '#2d3748', color: '#a0aec0', fontWeight: 600, _hover: { bg: '#4a5568' } }}
+          >
+            Skip
+          </Button>
+        )}
+        <Button
+          onClick={handleSubmit}
+          sx={{
+            flex: 2,
+            py: 3,
+            borderRadius: 'lg',
+            bg: selectedStars > 0 ? '#4299e1' : '#2d3748',
+            color: selectedStars > 0 ? 'white' : '#718096',
+            fontWeight: 'bold',
+            fontSize: 'md',
+            cursor: selectedStars > 0 ? 'pointer' : 'not-allowed',
+            _hover: selectedStars > 0 ? { bg: '#3182ce' } : {},
+          }}
+        >
+          Submit Rating
+        </Button>
+      </Row>
+    </Stack>
+  );
+}
+
+export default RatingStars;