import { FontAwesome } from '@expo/vector-icons';
import React, { FC } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

import { dialCall } from '../../../services/nativeHelpers/dialCall';
import { sendSms } from '../../../services/nativeHelpers/sendSms';
import IconButton from '../../Button/IconButton';

type props = {
  value?: string;
};

const PhoneDetail: FC<props> = ({ value }) => {
  return (
    <View className="flex-row items-center">
      <TouchableOpacity onPress={() => dialCall(value || '')}>
        <Text className="mr-4 text-secondary">{value}</Text>
      </TouchableOpacity>
      <IconButton variant="secondary" onPress={() => sendSms(value || '')}>
        <FontAwesome name="comment-o" size={20} />
      </IconButton>
    </View>
  );
};

export default PhoneDetail;
