text: import { Box, Icon, Button, Scrollable } from '@rocket.chat/fuselage';
  import React, { useCallback } from 'react';
  
  import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
  import { useTranslation } from '../contexts/TranslationContext';
  
  const defaultWrapperRenderer = (text) => (
  	<Box fontFamily='mono' alignSelf='center' fontScale='p2' style={{ wordBreak: 'break-all' }} mie='x4' flexGrow={1} maxHeight='x108'>
  		{text}
  	</Box>
  );
  
  const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }) => {
  	const t = useTranslation();
  	const dispatchToastMessage = useToastMessageDispatch();
  
  	const onClick = useCallback(() => {
  		try {
  			navigator.clipboard.writeText(text);
  			dispatchToastMessage({ type: 'success', message: t('Copied') });
  		} catch (e) {
  			dispatchToastMessage({ type: 'error', message: e });
  		}
  	}, [dispatchToastMessage, t, text]);
  
  	return (
  		<Box
  			display='flex'
  			flexDirection='row'
  			justifyContent='stretch'
  			alignItems='flex-start'
  			flexGrow={1}
  			padding='x16'
  			backgroundColor='surface'
  			width='full'
  			{...props}
  		>
  			<Scrollable vertical>{wrapper(text)}</Scrollable>
  			<Button ghost square small flexShrink={0} onClick={onClick} title={t('Copy')}>
  				<Icon name='copy' size='x20' />
  			</Button>
  		</Box>
  	);
  };
  
  export default TextCopy;
  