import React from 'react';
import { Text, TouchableOpacity, ActivityIndicator } from 'react-native';
import { useAppTheme } from '@theme';
import { getStyles } from './onlineToggleButton.styles';

interface OnlineToggleButtonProps {
  isOnline: boolean;
  onToggle: () => void;
  isLoading?: boolean;
}

export const OnlineToggleButton: React.FC<OnlineToggleButtonProps> = ({
  isOnline,
  onToggle,
  isLoading = false,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const buttonStyle = isOnline ? styles.offlineBg : styles.onlineBg;
  const label = isOnline ? 'Go Offline' : 'Go Online';

  return (
    <TouchableOpacity
      style={[styles.button, buttonStyle]}
      activeOpacity={0.8}
      onPress={onToggle}
      disabled={isLoading}
    >
      {isLoading ? (
        <ActivityIndicator color={colors.white} />
      ) : (
        <Text style={styles.text}>{label}</Text>
      )}
    </TouchableOpacity>
  );
};
export default OnlineToggleButton;