Email Address

---
interface Props {
	class?: string;
	email: string;
}

const { class: className, email } = Astro.props;
---

<span class:list={['email-address', className]}>
	{email.split('').reverse().join('')}
</span>

<style>
	.email-address {
		unicode-bidi: bidi-override;
		direction: rtl;
	}
</style>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		let emailAddressElements = document.querySelectorAll('.email-address');
		if (emailAddressElements) {
			emailAddressElements.forEach((item) => {
				item.addEventListener('copy', (event) => {
					let unreversedEmail = document
						.getSelection()
						.baseNode.data.split('')
						.reverse()
						.join('');
					event.clipboardData.setData('text/plain', unreversedEmail);
					event.preventDefault();
				});
			});
		}
	});
</script>