import React, { useCallback } from 'react'
import { BlurView } from 'expo-blur'
import { Pressable, Text } from 'react-native'
import { Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import { Entypo } from '@expo/vector-icons'
import { openShareSheet } from '../../utils/shareSheet'

export default function ShareBtn({ style, onPress = null, label = 'Partager l’expérience' }) {
  const handlePress = useCallback(() => {
    if (typeof onPress === 'function') {
      onPress()
      return
    }

    openShareSheet()
  }, [onPress])

  return (
    <Pressable
      onPress={handlePress}
      style={{
        ...style,
      }}
    >
      <BlurView
        style={{
          paddingHorizontal: 10,
          paddingVertical: 5,
          borderRadius: 15,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Text
          style={{
            fontSize: 14,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterRegular,
            marginRight: 5,
          }}
        >
          {label}
        </Text>
        <Entypo name="share-alternative" size={16} color="white" />
      </BlurView>
    </Pressable>
  )
}