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

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={GRAY} onPress={onPress} />
      </View>
    </View>
  );
}

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