import { JSX, createSignal } from "solid-js";

export function CopyButton(props: {copyText: string, children: Array<JSX.Element> | JSX.Element}) {
    const [successAnimation, setSuccessAnimation] = createSignal(false);

    const onclick = () => {
        if (props.copyText !== "") {
            navigator.clipboard.writeText(props.copyText);
            setSuccessAnimation(true);
            setTimeout(() => setSuccessAnimation(false), 500);
        }
    };

    return (
        <button
            onclick={onclick}
            class={
                `${successAnimation() ? "bg-c-success text-c-on-success" : "bg-c-primary-container text-c-on-primary-container"
                } rounded-lg transition-colors py-1 my-1 relative overflow-hidden inline-block w-full`
            }
        >
            {props.children}
        </button>
    );
}
