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

export type BaseButtonProps = {
  children?: ReactNode;
  className?: string;
  onPress: () => void;
  solid?: boolean;
  testID?: string;
};

const BaseButton = ({
  className,
  children,
  onPress,
  solid = false,
  testID,
}: BaseButtonProps) => {
  const { theme } = useThemeStore();
  return (
    <Pressable
      testID={testID}
      className={`rounded-lg p-4 mb-4 border-4 ${className}`}
      onPress={onPress}
      style={{
        borderColor: theme.borderPrimary,
        backgroundColor: solid ? theme.chatBot : theme.primeBg,
        shadowColor: theme.shadowColor,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
      }}
    >
      <Text
        className="text-center font-semibold text-lg"
        style={{ color: theme.buttonText }}
      >
        {children}
      </Text>
    </Pressable>
  );
};

export default BaseButton;