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

import { colors } from '../Colors'

export const ListItemFavoriteIndicator: React.FC = () => {
  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        alignItems: 'flex-end',
      }}
    >
      <View
        style={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: 0,
          height: 0,
          borderStyle: 'solid',
          borderRightWidth: 30,
          borderTopWidth: 30,
          borderRightColor: 'transparent',
          borderTopColor: colors.platform.apple,
          transform: [{ rotate: '90deg' }],
        }}
      />
      <FontAwesome5
        name="heart"
        size={10}
        color={colors.midWhite}
        solid
        style={{ margin: 4 }}
      />
    </View>
  )
}