import React from 'react';
import {
  Image,
  StyleSheet,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';
import {normalize} from '../../utils';

interface ArrowButtonProps extends TouchableOpacityProps {
  direction: 'forward' | 'backward';
  disabled?: boolean;
  onboarding?: boolean;
}
const ArrowButton: React.FC<ArrowButtonProps> = (props) => {
  const {direction, disabled, onboarding} = props;
  let uri;

  if (direction === 'forward') {
    if (disabled) {
      uri = require('../../assets/images/arrow-forward-disabled.png');
    } else {
      uri = require('../../assets/images/arrow-forward-enabled.png');
    }
  } else {
    if (onboarding) {
      uri = require('../../assets/images/onboarding-backarrow.png');
    } else {
      uri = require('../../assets/images/arrow-backward.png');
    }
  }

  return (
    <TouchableOpacity style={[styles.defautSize, props.style]} {...props}>
      <Image style={styles.image} source={uri} />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: '100%',
  },
  defautSize: {
    width: normalize(29),
    height: normalize(25),
  },
});

export default ArrowButton;