import { Box, Icon, MessageBody } from '@rocket.chat/fuselage';
import type { SyntheticEvent } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

export type IgnoredContentProps = {
	messageId: string;
	onShowMessageIgnored: () => void;
};

const IgnoredContent = ({ messageId, onShowMessageIgnored }: IgnoredContentProps) => {
	const { t } = useTranslation();

	const showMessageIgnored = (event: SyntheticEvent): void => {
		event.stopPropagation();

		onShowMessageIgnored();
	};

	return (
		<MessageBody id={`${messageId}-content`} role='document' aria-roledescription={t('message_body')} dir='auto'>
			<Box display='flex' alignItems='center' fontSize='c2' color='hint'>
				<span
					tabIndex={0}
					role='button'
					onClick={showMessageIgnored}
					onKeyDown={(e) => e.code === 'Enter' && showMessageIgnored(e)}
					style={{ cursor: 'pointer' }}
				>
					<Icon name='chevron-left' /> {t('Message_Ignored')}
				</span>
			</Box>
		</MessageBody>
	);
};

export default memo(IgnoredContent);