<script lang="ts">
	import Icon from '@iconify/svelte';

	let { data } = $props();

	let copied = $state(false);

	async function copyToClipboard() {
		try {
			await navigator.clipboard.writeText(data);
			copied = true;
			setTimeout(() => {
				copied = false;
			}, 2000);
		} catch (err) {
			console.error('Failed to copy text: ', err);
		}
	}
</script>

<button
	class="copy-btn btn gap-2 transition-all duration-300"
	class:btn-primary={!copied}
	class:btn-success={copied}
	class:animate-pulse={copied}
	onclick={copyToClipboard}
	disabled={copied}
>
	<span class="icon-wrapper" class:animate-bounce={copied}>
		{#if copied}
			<Icon icon="tabler:check" class="w-4 h-4" />
		{:else}
			<Icon icon="tabler:copy" class="w-4 h-4" />
		{/if}
	</span>
	{copied ? 'Copied!' : 'Copy'}
</button>

<style>
	@reference "tailwindcss";

	.copy-btn {
		@apply relative overflow-hidden;
	}

	.icon-wrapper {
		@apply transition-transform duration-200;
	}
</style>
