import * as React from "react";
import { useCallback } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { style } from "./style";

export const LoginWithButton = ({
  children,
  onPress,
  backgroundColor = "#fff",
  color = "#222",
  icon,
}: {
  children: React.ReactNode;
  onPress: () => any;
  backgroundColor?: string;
  color?: string;
  icon?: React.ReactNode;
}) => {
  const onButtonPress = useCallback(() => onPress && onPress(), [onPress]);
  return (
    <TouchableOpacity
      onPress={onButtonPress}
      style={{ ...style.loginButton, backgroundColor }}
    >
      {icon && (
        <View style={style.loginButtonIconContainer}>
          <View style={style.loginButtonIcon}>{icon}</View>
          <View style={style.iconDivider}></View>
        </View>
      )}
      <Text style={{ ...style.loginButtonText, color }}>{children}</Text>
    </TouchableOpacity>
  );
};