"use client";

import { useState } from "react";

export function CopyEmail({
    email,
    copyLabel,
    copiedLabel,
}: {
    email: string;
    copyLabel: string;
    copiedLabel: string;
}) {
    const [copied, setCopied] = useState(false);

    async function copy() {
        try {
            await navigator.clipboard.writeText(email);
        } catch {
            const area = document.createElement("textarea");
            area.value = email;
            document.body.appendChild(area);
            area.select();
            document.execCommand("copy");
            document.body.removeChild(area);
        }
        setCopied(true);
        window.setTimeout(() => setCopied(false), 2000);
    }

    return (
        <button
            type="button"
            onClick={copy}
            className="rounded-full border border-white/15 px-5 py-3 text-sm text-zinc-300 transition-colors hover:border-blurple hover:text-white"
        >
            {copied ? copiedLabel : copyLabel}
        </button>
    );
}