import React from 'react';
import {Image, TouchableOpacity, TouchableOpacityProps} from 'react-native';

interface ArrowButtonProps extends TouchableOpacityProps {
  direction: 'forward' | 'backward';
  disabled?: boolean;
}
const ArrowButton: React.FC<ArrowButtonProps> = (props: ArrowButtonProps) => {
  const arrow =
    props.direction === 'forward'
      ? props.disabled
        ? require('../../assets/images/arrow-forward-disabled.png')
        : require('../../assets/images/arrow-forward-enabled.png')
      : require('../../assets/images/arrow-backward.png');

  return (
    <TouchableOpacity {...props}>
      <Image source={arrow} />
    </TouchableOpacity>
  );
};

export default ArrowButton;