import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

export default function DriveStatus({distance,onPress}) {
  //남은 키로수
  return (
    <View style={styles.driveStatus}>
      <View style={styles.driveStatusTextBox}>
        <Text style={styles.driveStatusText}>{distance}km</Text>
      </View>
      <View style={styles.driveStatusIcon}>
        <Icon
          name="ellipsis-v"
          size={20}
          color="#cccccc"
          onPress={onPress}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  driveStatus: {
    paddingVertical: 20,
    paddingHorizontal:16,
    borderTopColor: '#cccccc',
    borderTopWidth: 2,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  driveStatusText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  driveStatusTextBox: {
    flex:30,
  },
  driveStatusIcon: {
    flex: 1,
    paddingLeft: 15,
  },
});