import { BlurView } from 'expo-blur'
import { Image } from 'expo-image'
import React from 'react'
import { Platform, Pressable, Text } from 'react-native'
import { icons } from '../assets'
import { musiclandShareHeading } from '../data'
import { Palette } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'
import alert from './Alert'

export default function ShareBtnWeb({ style }) {
  const handleShare = () => {
    const shareUrl = typeof window !== 'undefined' ? window.location.href : undefined
    if (typeof navigator !== 'undefined' && navigator.share) {
      navigator
        .share({
          title: musiclandShareHeading,
          text: 'Découvre mon expérience sur MusicLand',
          ...(shareUrl ? { url: shareUrl } : {}),
        })
        .catch(() => {
          alert('Partage', 'Le partage a été annulé.')
        })
      return
    }
    alert('Partage', 'Fonctionnalité disponible prochainement.')
  }

  return (
    <Pressable
      style={{
        ...style,
      }}
      onPress={handleShare}
    >
      <BlurView
        intensity={Platform.OS === 'web' ? 35 : 30}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 12,
          paddingHorizontal: 24,
          paddingVertical: 12,
          borderRadius: 999,
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
        }}
      >
        <Text
          style={{
            fontSize: 14,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterMedium,
          }}
        >
          Partagez l'expérience
        </Text>
        <Image
          source={icons.share}
          style={{
            width: 18,
            height: 18,
            tintColor: Palette.white,
          }}
          contentFit="contain"
        />
      </BlurView>
    </Pressable>
  )
}