import { Pressable, Text, ActivityIndicator } from "react-native";
import { useThemeStore } from "../stores/ThemeStore";

interface AuthButtonProps {
  title: string;
  onPress: () => void;
  isLoading?: boolean;
  testID?: string;
}

const AuthButton = ({
  title,
  onPress,
  isLoading = false,
  testID,
}: AuthButtonProps) => {
  const { theme } = useThemeStore();
  return (
    <Pressable
      testID={testID}
      onPress={onPress}
      disabled={isLoading}
      className="w-full rounded-lg p-4 mb-4 border-4"
      style={{
        backgroundColor: isLoading ? theme.disabledButton : theme.chatBot,
        shadowColor: theme.shadowColor,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
      }}
    >
      {isLoading ? (
        <ActivityIndicator color={theme.buttonText} />
      ) : (
        <Text
          className="text-center font-semibold text-lg"
          style={{ color: theme.buttonText }}
        >
          {title}
        </Text>
      )}
    </Pressable>
  );
};

export default AuthButton;
