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 { 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: "MusicLand",
          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>
  );
}