text: import React from 'react'
  import { Feather } from '@expo/vector-icons'
  import { useNavigation, useRoute } from '@react-navigation/native'
  import { View, Image, Text, TouchableOpacity, Linking } from 'react-native'
  import * as MailComposer from 'expo-mail-composer'
  
  import logoimg from '../../assets/logo.png'
  
  import styles from './styles'
  
  export default function Detail() {
    const navigation = useNavigation()
    const route = useRoute()
  
    const { incident } = route.params
    const message = `Olá ${
      incident.name
    }, estou entrando em contato pois gostaria de ajudar no caso "${
      incident.title
    }" com o valor de ${Intl.NumberFormat('pt-br', {
      style: 'currency',
      currency: 'BRL',
    }).format(incident.value)}`
  
    function navigateBack() {
      navigation.goBack()
    }
  
    function sendMail() {
      MailComposer.composeAsync({
        subject: `Herói do caso: ${incident.title}`,
        recipients: [incident.email],
        body: message,
      })
    }
  
    function sendWhatsapp() {
      Linking.openURL(
        `whatsapp://send?phone=${incident.whatsapp}&text=${message}`
      )
    }
  
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Image source={logoimg} />
  
          <TouchableOpacity onPress={navigateBack}>
            <Feather name="arrow-left" size={28} color="#E02041" />
          </TouchableOpacity>
        </View>
  
        <View style={styles.incident}>
          <Text
            style={{
              marginTop: 0,
              fontSize: 14,
              color: '#41414d',
              fontWeight: 'bold',
            }}
          >
            ONG:
          </Text>
          <Text style={styles.incidentValue}>
            {incident.name} de {incident.city}/{incident.uf}{' '}
          </Text>
  
          <Text style={styles.incidentProperty}>CASO:</Text>
          <Text style={styles.incidentValue}>{incident.description}</Text>
  
          <Text style={styles.incidentProperty}>VALOR:</Text>
          <Text style={styles.incidentValue}>
            {Intl.NumberFormat('pt-br', {
              style: 'currency',
              currency: 'BRL',
            }).format(incident.value)}
          </Text>
        </View>
  
        <View style={styles.contactBox}>
          <Text style={styles.heroTitle}>Salve o dia!</Text>
          <Text style={styles.heroTitle}>Seja o herói desse caso.</Text>
  
          <Text style={styles.heroDescription}>Entre em contato:</Text>
  
          <View style={styles.actions}>
            <TouchableOpacity style={styles.action} onPress={sendWhatsapp}>
              <Text style={styles.actionText}>Whatsapp</Text>
            </TouchableOpacity>
  
            <TouchableOpacity style={styles.action} onPress={sendMail}>
              <Text style={styles.actionText}>Email</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
  