import { FontAwesome5 } from '@expo/vector-icons'
import React from 'react'
import { Pressable } from 'react-native'
import { colors, colorsV2 } from '../Colors'

/**
 * 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)
    }}
  >
    <FontAwesome5
      name="heart"
      size={24}
      color={isFavorite ? colors.heartRed : colorsV2.white}
      solid={isFavorite}
      style={{ margin: 10 }}
    />
  </Pressable>
)