---
interface Props {
	text: string;
	label?: string;
}

const { text, label = 'Copy' } = Astro.props;
---

<copy-button data-text={text}>
	<button type="button" aria-label={`${label}: ${text}`} hidden>{label}</button>
</copy-button>

<script>
	// Progressive enhancement: the button only appears when the Clipboard API is available.
	class CopyButton extends HTMLElement {
		connectedCallback() {
			const button = this.querySelector('button');
			const text = this.dataset.text;
			if (!button || !text || !navigator.clipboard) return;

			button.hidden = false;
			const original = button.textContent;
			button.addEventListener('click', async () => {
				await navigator.clipboard.writeText(text);
				button.textContent = 'Copied';
				setTimeout(() => (button.textContent = original), 1500);
			});
		}
	}

	customElements.define('copy-button', CopyButton);
</script>

<style>
	button {
		font: inherit;
		font-size: 0.8rem;
		padding: 0.2rem 0.6rem;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
		color: var(--text);
		cursor: pointer;
	}

	button:hover {
		border-color: var(--accent);
	}
</style>