import React, { FC, ReactNode } from 'react';
import { NavigationProp, useNavigation } from '@react-navigation/native';
import { Text, TouchableOpacity, View } from 'react-native';

import { styles } from './style';
import { Colors } from '../../theme';

import ArrowRightIcon from '../../../assets/icons/right-arrow.svg';

type ButtonProps = {
  label: string;
  icon: ReactNode;
  buttonFn?: (navigate: NavigationProp<ReactNavigation.RootParamList>) => void;
  red?: boolean;
  disabled?: boolean;
};

export const MenuButton: FC<ButtonProps> = ({ label, icon, buttonFn, red, disabled }) => {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
      onPress={() => (buttonFn ? buttonFn(navigation) : null)}
      disabled={disabled}
    >
      <View style={styles.alignStyle}>
        {icon}
        <Text
          style={[
            styles.buttonLabel,
            red ? { color: Colors.RED } : null,
            disabled ? { color: Colors.LIGHT_GRAY } : null
          ]}
        >
          {label}
        </Text>
      </View>
      <View>
        <ArrowRightIcon fill={red ? Colors.RED : Colors.LIGHT_GRAY} width={20} height={20} />
      </View>
    </TouchableOpacity>
  );
};
