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

interface Props {
  item: DatePillMessage;
}

function DatePill({item}: Props) {
  const datePillMargins = getMessageMargins(item);

  return (
    <View style={[styles.pill, datePillMargins]}>
      <Pill text={item.data.date} variant="neutral" />
    </View>
  );
}

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

export default memo(DatePill);
