src/components/ride/RouteDisplay.tsx

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Text } from 'react-native-paper';

export interface RouteDisplayProps {
  /** Origin address text */
  origin: string;
  /** Destination address text */
  destination: string;
}

/**
 * Vertical origin → destination display with connecting line,
 * circle marker for origin, and filled circle for destination.
 */
export function RouteDisplay({ origin, destination }: RouteDisplayProps) {
  const theme = useTheme();

  return (
    <View style={styles.container}>
      <View style={styles.routeLine}>
        {/* Origin marker – hollow circle */}
        <View
          style={[
            styles.dot,
            {
              backgroundColor: 'transparent',
              borderColor: theme.colors.primary,
              borderWidth: 2,
            },
          ]}
        />
        {/* Connecting line */}
        <View
          style={[
            styles.verticalLine,
            { backgroundColor: theme.colors.outlineVariant },
          ]}
        />
        {/* Destination marker – filled circle */}
        <View
          style={[
            styles.dot,
            styles.dotFilled,
            { backgroundColor: theme.colors.tertiary },
          ]}
        />
      </View>

      <View style={styles.textsContainer}>
        <Text
          variant="bodyMedium"
          numberOfLines={2}
          style={[styles.text, { color: theme.colors.onSurface }]}
        >
          {origin}
        </Text>
        <View style={styles.spacer} />
        <Text
          variant="bodyMedium"
          numberOfLines={2}
          style={[styles.text, { color: theme.colors.onSurface }]}
        >
          {destination}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: 12,
  },
  routeLine: {
    alignItems: 'center',
    width: 14,
  },
  dot: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  dotFilled: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  verticalLine: {
    width: 2,
    flex: 1,
    minHeight: 20,
    marginVertical: 3,
  },
  textsContainer: {
    flex: 1,
    justifyContent: 'space-between',
    paddingVertical: 0,
  },
  text: {
    flexShrink: 1,
  },
  spacer: {
    flex: 1,
  },
});