import { ReactNode } from "react";
import { View, Text, GestureResponderEvent } from "react-native";
import { Button as PaperButton } from "react-native-paper";

interface ButtonProps {
  buttonColor?: string;
  buttonMode?: "outlined" | "contained";
  buttonTextColor?: string;
  onPress: (event: GestureResponderEvent) => void;
  disabled: boolean;
  children: ReactNode;
  className?: string;
  icon?: string;
}

export const Button = ({
  buttonColor = "#6750a4",
  buttonMode = "outlined",
  buttonTextColor = "white",
  onPress,
  disabled,
  children,
  className,
  icon,
}: ButtonProps) => {
  return (
    <View className={className}>
      <PaperButton
        mode={buttonMode}
        background={{ color: buttonColor }}
        buttonColor={buttonColor}
        onPress={onPress}
        disabled={disabled}
        textColor={buttonTextColor}
        icon={icon}
        style={{ borderRadius: 4, borderColor: "transparent" }}
      >
        {typeof children === "string" || typeof children === "number" ? (
          <Text>{children}</Text>
        ) : (
          children
        )}
      </PaperButton>
    </View>
  );
};