import React from 'react';
import {Pressable, StyleProp, View, ViewStyle} from 'react-native';
import Icon from '@components/Icon';
import {
  AvatarWithName,
  AvatarWithNameProps,
} from '@components/Image/components/AvatarWithName';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props extends Omit<AvatarWithNameProps, 'style'> {
  withClose?: boolean;
  onClose?: () => void;
  containerStyle?: StyleProp<ViewStyle>;
  nameMaxWidth?: number;
}

/**
 * @deprecated Use `_HuGo` components instead
 */
export function AvatarTag({
  onClose,
  containerStyle,
  withClose,
  nameMaxWidth = 160,
  ...props
}: Props) {
  return (
    <View style={[styles.container, containerStyle]}>
      <AvatarWithName
        nameStyle={{maxWidth: nameMaxWidth}}
        adjustsFontSizeToFit={false}
        {...props}
      />
      {withClose && (
        <Pressable style={styles.deletePressable} onPress={onClose}>
          <View style={styles.delete}>
            <Icon name="close" size="xs" color={COLORS.WHITE} />
          </View>
        </Pressable>
      )}
    </View>
  );
}
