import { FontAwesome5 } from '@expo/vector-icons'
import React from 'react'
import { TouchableOpacity, View } from 'react-native'

import { colors } from '../Colors'
import { Strings } from '../i18n'

export const TopCloseXButton: React.FC<{
  size?: number
  onPress: () => void
}> = ({ onPress, size }) => (
  <View
    style={{
      alignItems: 'flex-end',
    }}
  >
    <TouchableOpacity
      onPress={onPress}
      style={{
        padding: 6,
      }}
      accessibilityLabel={Strings.Shared.Dismiss}
      accessibilityRole="button"
    >
      <FontAwesome5
        name="times"
        color={colors.midWhite}
        size={size ?? 21}
        style={{ margin: 2 }}
      />
    </TouchableOpacity>
  </View>
)