import { Feather } from '@expo/vector-icons'
import { Pressable } from 'react-native'
import Animated from 'react-native-reanimated'
import { haptic } from 'src/lib/haptics'
import { useTheme } from 'tamagui'

type LikeButtonProps = {
  hasLiked: boolean
  handleLike: () => void
  size?: number
}

export default function LikeButton(props: LikeButtonProps) {
  const { hasLiked, handleLike, size = 32 } = props
  const theme = useTheme()

  const handlePress = () => {
    haptic.medium()
    handleLike()
  }

  return (
    <Pressable
      onPress={handlePress}
      hitSlop={4}
      style={({ pressed }) => ({
        transform: [{ scale: pressed ? 0.96 : 1 }],
        opacity: pressed ? 0.9 : 1,
      })}
    >
      <Animated.View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          transform: [{ scale: hasLiked ? 0 : 1 }],
          transitionProperty: 'transform',
          transitionDuration: 300,
          transitionTimingFunction: 'ease-out',
        }}
      >
        <Feather name="heart" size={size} color={theme.color.val} />
      </Animated.View>

      <Animated.View
        style={{
          transform: [{ scale: hasLiked ? 1 : 0 }],
          opacity: hasLiked ? 1 : 0,
          transitionProperty: 'transform, opacity',
          transitionDuration: 260,
          transitionTimingFunction: 'ease-out',
        }}
      >
        <Feather name="heart" size={size} color={theme.accent.val as string} />
      </Animated.View>
    </Pressable>
  )
}
