import React, { useState } from "react";
import { TouchableOpacity, ViewStyle, TextStyle, Text } from "react-native";

type Props = {
  styles: {
    button: ViewStyle;
    focusedButton: ViewStyle;
    buttonText: TextStyle;
    focusedText: TextStyle;
  };
  onPress: () => void;
  text: string;
};

export function Button(props: Props) {
  const [focused, setFocused] = useState(false);

  return (
    <TouchableOpacity
      activeOpacity={1}
      onPressIn={() => setFocused(true)}
      onPressOut={() => setFocused(false)}
      onPress={() => props?.onPress?.()}
      style={[
        props?.styles?.button,
        focused ? props?.styles?.focusedButton : {},
      ]}
    >
      <Text
        style={[
          props?.styles.buttonText,
          focused ? props?.styles?.focusedText : {},
        ]}
      >
        {props?.text}
      </Text>
    </TouchableOpacity>
  );
}