import type { IReadReceiptWithUser } from '@rocket.chat/core-typings';
import { Box } from '@rocket.chat/fuselage';
import { UserAvatar } from '@rocket.chat/ui-avatar';
import { useUserDisplayName } from '@rocket.chat/ui-client';

import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';

const ReadReceiptRow = ({ user, ts }: IReadReceiptWithUser) => {
	const displayName = useUserDisplayName(user || {});
	const formatDateAndTime = useFormatDateAndTime({ withSeconds: true });

	return (
		<Box role='listitem' display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' marginBlockEnd={8}>
			<Box display='flex' flexDirection='row' alignItems='center'>
				<UserAvatar username={user?.username || ''} size='x24' />
				<Box is='span' marginInlineStart={8}>
					{displayName}
				</Box>
			</Box>
			<Box is='span' fontScale='c1' color='hint'>
				{formatDateAndTime(ts)}
			</Box>
		</Box>
	);
};

export default ReadReceiptRow;