import React from 'react';
import { View, Text } from 'react-native';
import { getStyles } from './liveTrackingScreen.styles';
import { Header, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';

export const LiveTrackingScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <Header title="Live Tracking" onBack={() => {}} />
      <View style={styles.mapPlaceholder}>
        <Text style={styles.mapIcon}>🗺️</Text>
        <Text style={styles.mapText}>Live Map</Text>
        <Text style={styles.mapSubtext}>
          Delivery partner location tracking
        </Text>
        <View style={styles.blinkingBadge}>
          <Text style={styles.blinkingText}>● Live</Text>
        </View>
      </View>
      <View style={styles.agentSheet}>
        <Text style={styles.agentName}>Rahul Sharma</Text>
        <Text style={styles.agentRating}>⭐ 4.8</Text>
        <Text style={styles.agentVehicle}>KA-01-AB-1234 • Honda Activa</Text>
        <View style={styles.agentActions}>
          <PrimaryButton
            title="Call"
            onPress={() => {}}
            style={{ flex: 1, marginRight: 8 }}
          />
          <PrimaryButton
            title="Message"
            onPress={() => {}}
            style={{ flex: 1, marginLeft: 8 }}
          />
        </View>
      </View>
    </View>
  );
};