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

import { colors } from "@/constants/colors";

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 = colors.primaryPurpleDark,
  buttonMode = "outlined",
  buttonTextColor = "white",
  onPress,
  disabled = false,
  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={styles.buttonStyle}
      >
        {children}
      </PaperButton>
    </View>
  );
};

const styles = StyleSheet.create({
  buttonStyle: {
    borderRadius: 4,
    borderColor: "transparent",
  },
});
