import React, { useState } from 'react';
import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { RefreshCw } from 'lucide-react-native';
import useTradeStore from '@/store/useTradeStore';

// Temporarily remove Firebase imports until Firebase is properly installed
// import { useAuth } from '@/hooks/useAuth';

interface SyncDataButtonProps {
  style?: any;
}

const SyncDataButton: React.FC<SyncDataButtonProps> = ({ style }) => {
  const [syncing, setSyncing] = useState(false);
  const { userProfile } = useTradeStore();
  
  // Temporarily comment out Firebase auth hook
  // const { syncUserData } = useAuth();
  
  const handleSync = async () => {
    if (!userProfile.isLoggedIn) {
      return;
    }
    
    setSyncing(true);
    
    try {
      // Temporarily use mock sync instead of Firebase
      // await syncUserData();
      
      // Mock successful sync
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      console.log('Data synced successfully');
    } catch (error) {
      console.error('Error syncing data:', error);
    } finally {
      setSyncing(false);
    }
  };
  
  if (!userProfile.isLoggedIn) {
    return null;
  }
  
  return (
    <TouchableOpacity 
      style={[styles.syncButton, style]} 
      onPress={handleSync}
      disabled={syncing}
    >
      {syncing ? (
        <ActivityIndicator size="small" color="#fff" />
      ) : (
        <RefreshCw size={16} color="#fff" />
      )}
      <Text style={styles.syncText}>Sync</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  syncButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#29ABE2',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    gap: 6,
  },
  syncText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '500',
  },
});

export default SyncDataButton;