import { FontAwesome5 } from '@expo/vector-icons'
import React from 'react'
import { Pressable } from 'react-native'

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

/**
 * Heart icon that can be pressed to toggle favorite status of entity on/off
 */
export const FavoriteHeart: React.FC<{
  isFavorite: boolean
  setIsFavorite: (isFavorite: boolean) => void
}> = ({ isFavorite, setIsFavorite }) => (
  <Pressable
    onPress={() => {
      setIsFavorite(!isFavorite)
    }}
    accessibilityLabel={Strings.Shared.Favorites}
    accessibilityRole="switch"
    accessibilityState={{ checked: isFavorite }}
  >
    <FontAwesome5
      name="heart"
      size={24}
      color={isFavorite ? colors.platform.apple : colors.white}
      solid={isFavorite}
      style={{ margin: 10 }}
    />
  </Pressable>
)