import React, { useState } from 'react';
import { Pressable, StyleSheet, ActivityIndicator } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { useWalletConnectModal } from '@walletconnect/modal-react-native';
import { CHAIN_ID, CONTRACT_ADDRESS, providerMetadata } from '@/constants/Web3';

export default function WalletConnectSection() {
  const { open, isConnected, provider } = useWalletConnectModal();
  const [loading, setLoading] = useState(false);

  const connectWallet = async () => {
    setLoading(true);
    try {
      if (isConnected) await provider?.disconnect();
      else await open();
    } catch (error) {
      console.error('Wallet connection failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Pressable onPress={connectWallet} style={styles.button}>
      <ThemedText style={styles.text}>
        {loading ? <ActivityIndicator color="#fff" /> : isConnected ? 'Disconnect' : 'Connect Wallet'}
      </ThemedText>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007bff',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
    marginVertical: 8,
  },
  text: { color: '#fff' },
});