import * as React from 'react';
import {StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
import {getToggleButtonText, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';

type ToggleButtonProps = {
  toggleState: boolean;
  handleToggle: Function;
  buttonType: string;
};

const ToggleButton: React.FC<ToggleButtonProps> = ({
  toggleState,
  handleToggle,
  buttonType,
}) => {
  return (
    <TouchableOpacity style={styles.button} onPress={() => handleToggle()}>
      <Text style={styles.text}>
        {getToggleButtonText(buttonType, toggleState)}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.25,
    height: SCREEN_WIDTH * 0.1,
    borderRadius: 8,
    marginTop: '3%',
    borderColor: TAGG_TEXT_LIGHT_BLUE,
    backgroundColor: 'white',
    borderWidth: 3,
    marginHorizontal: '1%',
  },
  text: {
    fontWeight: 'bold',
    color: TAGG_TEXT_LIGHT_BLUE,
  },
});
export default ToggleButton;