import React from 'react';
import {TouchableOpacity, ViewStyle} from 'react-native';
import Icon from '@components/Icon';

import {styles} from './styles';

interface Props {
  top?: number;
  right?: number;
  onPress?: () => void;
  color?: string;
  containerStyle?: ViewStyle;
}

/**
 * @deprecated - Use `_HuGo/Button/IconButton` instead
 */
function DeleteButton({top, right, onPress, color, containerStyle}: Props) {
  return (
    <TouchableOpacity
      style={[
        styles.deleteButton,
        {
          ...(top !== undefined &&
            right !== undefined && {
              position: 'absolute',
              right,
              top,
            }),
        },
        ...(color ? [styles.color, {borderColor: color}] : []),
        containerStyle,
      ]}
      onPress={onPress}>
      <Icon name="close" color={color} />
    </TouchableOpacity>
  );
}

export default DeleteButton;