import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import { Icon } from 'react-native-elements';

interface Props {
  distance: number;
  style?: ViewStyle;
}

export const DistanceIndicator: React.SFC<Props> = ({ distance, style }) => (
  <View style={[styles.container, style]}>
    <Icon name={'location-on'} color={'gray'} size={11} />
    <Text style={styles.text}>
      {
        distance > 1000
          ? `${distance / 1000} km stąd`
          : '< 1km stąd'
      }
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginLeft: -2,
  },
  text: { fontSize: 11 },
});
