import React, {memo} from 'react';
import {StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Pill} from '@components';
import {CHATS_SPACING, getMessageMargins} from '@modules/chats/utils';
import {UnreadPillMessage} from '@modules/chats/interfaces';

interface Props {
  item: UnreadPillMessage;
}

function UnreadPill({item}: Props) {
  const {t} = useTranslation();
  const unreadPillMargins = getMessageMargins(item);
  const count = item.data.unreadCount;

  return (
    <View style={[styles.pill, unreadPillMargins]}>
      <Pill
        text={
          count > 99
            ? t('chat.messages.max_unreads')
            : t('chat.messages.unreads', {count})
        }
        variant="info"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  pill: {
    alignSelf: 'center',
    marginBottom: CHATS_SPACING.gap,
  },
});

export default memo(UnreadPill);
