---
import { Icon } from 'astro-iconify';
---

<div
	id="toast-success"
	class="items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 flex transition"
	role="alert"
>
	<div
		class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200"
	>
		<svg
			aria-hidden="true"
			class="w-5 h-5"
			fill="currentColor"
			viewBox="0 0 20 20"
			xmlns="http://www.w3.org/2000/svg"
			><path
				fill-rule="evenodd"
				d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
				clip-rule="evenodd"></path>
		</svg>
		<span class="sr-only">Check icon</span>
	</div>
	<div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
	<button
		type="button"
		class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
		id="toast-close-btn"
		aria-label="Close"
	>
		<span class="sr-only">Close</span>
		<svg
			aria-hidden="true"
			class="w-5 h-5"
			fill="currentColor"
			viewBox="0 0 20 20"
			xmlns="http://www.w3.org/2000/svg"
			><path
				fill-rule="evenodd"
				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
				clip-rule="evenodd"></path>
		</svg>
	</button>
</div>

<button
	class="copy-btn flex items-center w-4/5 mt-3 justify-center max-w-xs astro-md:w-1/2 astro-lg:w-sm astro-lg:mt-0 astro-lg:ml-3"
	id="copy-command-button"
>
	<span id="command">&gt; npm install @astro-reactive/form</span>
	<Icon name="mdi:content-copy" width="30px" height="30px" />
</button>

<style>
	.copy-btn {
		/* max-width: 50%; */
		color: #fff;
		background-color: #2f2f2f;
		border-radius: 4px;
		padding: 6px 16px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: background-color 0.2s ease-in-out;
	}

	span#command {
		margin-right: 1rem;
		padding: 0.5rem 0;
	}

	.copy-btn > span {
		white-space: nowrap;
		overflow-x: hidden;
		text-overflow: ellipsis;
	}

	.copy-btn:hover {
		background-color: #3f3f3f;
	}

	#toast-success {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) translateY(100%);
		opacity: 0;
		z-index: 999;
	}
</style>

<script>
	const copyCommandButton = document.getElementById('copy-command-button');
	const commandText = document.getElementById('command').innerText;
	const toastSuccess = document.getElementById('toast-success');
	const toastClose = document.getElementById('toast-close-btn');

	copyCommandButton?.addEventListener('click', () => {
		toastSuccess.style.transform = 'translateX(-50%) translateY(0)';
		toastSuccess.style.opacity = '1';
		navigator.clipboard.writeText(commandText);
	});

	toastClose?.addEventListener('click', () => {
		toastSuccess.style.transform = 'translateX(-50%) translateY(100%)';
		toastSuccess.style.opacity = '0';
	});
</script>
