---
interface Props {
    code: string;
    index: number;
}
const { code, index } = Astro.props;
---

<div class="gift-card" style={`animation-delay: ${index * 80}ms`}>
    <div>
        <p class="gift-card-label">Gift code {index + 1}</p>
        <p class="gift-card-code">{code}</p>
    </div>
    <button class="copy-btn" data-code={code} aria-label={`Copy code ${code}`}
        >Copy</button
    >
</div>

<script>
    document.querySelectorAll<HTMLButtonElement>(".copy-btn").forEach((btn) => {
        btn.addEventListener("click", async () => {
            const code = btn.dataset.code ?? "";
            try {
                await navigator.clipboard.writeText(code);
                btn.textContent = "Copied";
                btn.classList.add("copied");
                setTimeout(() => {
                    btn.textContent = "Copy";
                    btn.classList.remove("copied");
                }, 2000);
            } catch {
                btn.textContent = "Error";
                setTimeout(() => {
                    btn.textContent = "Copy";
                }, 2000);
            }
        });
    });
</script>