import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Platform, useColorScheme, Image } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

interface SocialButtonsProps {
  onGooglePress: () => void;
  onFacebookPress: () => void;
  onApplePress: () => void;
}

export default function SocialButtons({ onGooglePress, onFacebookPress, onApplePress }: SocialButtonsProps) {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  return (
    <View style={styles.container}>
      <Text style={[styles.divider, { color: isDark ? '#a0aec0' : '#888' }]}>Or continue with</Text>

      <View style={styles.row}>
        {/* Google Button */}
        <TouchableOpacity
          style={[styles.circleButton, { backgroundColor: 'white' }]}
          onPress={onGooglePress}
        >
          <Image
            source={require('../../assets/icons/google.png')}
            style={{ width: 24, height: 24 }}
            resizeMode="contain"
          />
        </TouchableOpacity>

        {/* Facebook Button */}
        <TouchableOpacity
          style={[styles.circleButton, { backgroundColor: '#1877F2', borderWidth: 0 }]}
          onPress={onFacebookPress}
        >
          <FontAwesome name="facebook" size={24} color="white" />
        </TouchableOpacity>

        {/* Apple Button */}
        {Platform.OS === 'ios' && (
          <TouchableOpacity
            style={[
              styles.circleButton,
              { backgroundColor: isDark ? 'white' : 'black', borderWidth: 0 }
            ]}
            onPress={onApplePress}
          >
            <FontAwesome name="apple" size={24} color={isDark ? "black" : "white"} />
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    width: '100%',
    alignItems: 'center',
  },
  divider: {
    textAlign: 'center',
    marginBottom: 20,
    fontSize: 14,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 20, // Space between buttons
  },
  circleButton: {
    width: 50,
    height: 50,
    borderRadius: 25,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  google: {
    backgroundColor: 'white',
  },
  facebook: {
    backgroundColor: 'white',
  },
  appleLight: {
    backgroundColor: 'white',
  },
  appleDark: {
    backgroundColor: '#333', // Dark background for Apple button in Dark Mode
  }
});