// @flow

import * as React from 'react'
import {Platform} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import {Touchable} from '@frogpond/touchable'
import {rightButtonStyles as styles} from './styles'

type Props = {
	onFavorite: () => mixed,
	favorited: boolean,
}

// (ios|md)-heart(-outline)
const filled = `${Platform.OS === 'ios' ? 'ios' : 'md'}-heart`
const outlined = `${filled}-outline`

export function FavoriteButton(props: Props) {
	const icon = props.favorited ? filled : outlined

	return (
		<Touchable
			highlight={false}
			onPress={props.onFavorite}
			style={styles.button}
		>
			<Icon name={icon} style={styles.icon} />
		</Touchable>
	)
}

@@ -309,24 +309,23 @@
 )-heart(
--outline
+%7C-empty
 )%0Aconst 
@@ -409,23 +409,21 @@
 filled%7D-
-outline
+empty
 %60%0A%0Aexpor

Use {...}-empty instead of -outline