import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCheck, IconX} from '@tabler/icons-react-native';
import {Button} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  onApprove?: () => void;
  onReject?: () => void;
  disabled?: boolean;
}

const ApproveDenyButtons = ({onApprove, onReject, disabled}: Props) => {
  const {t} = useTranslation();
  const {theme} = useTheme();
  return (
    <View
      style={[
        styles.container,
        {borderTopColor: theme.border.neutral.default},
      ]}>
      <View style={styles.buttonsContainer}>
        {onReject && (
          <Button
            text={t('group.reject_request')}
            onPress={onReject}
            disabled={disabled}
            size="sm"
            containerStyle={styles.flex}
            variant="secondary"
            IconLeft={IconX}
          />
        )}
        {onApprove && (
          <Button
            disabled={disabled}
            text={t('group.approve_request')}
            onPress={onApprove}
            size="sm"
            containerStyle={styles.flex}
            IconLeft={IconCheck}
          />
        )}
      </View>
    </View>
  );
};

export default ApproveDenyButtons;
