import Clipboard from "../../Utils/Clipboard";
import React from "react";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
const CopyTextButton = (props) => {
    const [copied, setCopied] = React.useState(false);
    const size = props.size || "xs";
    const variant = props.variant || "ghost";
    const label = props.label || "Copy";
    const copiedLabel = props.copiedLabel || "Copied!";
    const handleCopy = async (event) => {
        event.preventDefault();
        event.stopPropagation();
        await Clipboard.copyToClipboard(props.textToBeCopied);
        setCopied(true);
        setTimeout(() => {
            setCopied(false);
        }, 1000);
    };
    const sizeClasses = {
        xs: "text-[10px] px-1.5 py-0.5 rounded",
        sm: "text-xs px-2 py-1 rounded-md",
        md: "text-sm px-2.5 py-1.5 rounded-md",
    };
    const iconSizes = {
        xs: "w-3.5 h-3.5",
        sm: "w-4 h-4",
        md: "w-4.5 h-4.5",
    };
    const variantClasses = {
        ghost: "bg-transparent border border-gray-200 text-gray-400 hover:bg-gray-50 hover:text-gray-600",
        soft: "bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200",
        solid: "bg-indigo-600 text-white border border-indigo-600 hover:bg-indigo-500",
    };
    const copiedClasses = "bg-emerald-50 border border-emerald-200 text-emerald-600";
    return (React.createElement("button", { type: "button", className: `inline-flex items-center justify-center gap-1 transition-colors duration-150 cursor-pointer select-none ${copied ? copiedClasses : variantClasses[variant]} ${sizeClasses[size]} ${props.className || ""}`, onClick: handleCopy, onKeyDown: (e) => {
            if (e.key === "Enter" || e.key === " ") {
                handleCopy(e);
            }
        }, title: props.title || label, "aria-label": props.title || label },
        React.createElement("span", { "aria-hidden": "true", className: "flex items-center justify-center" }, copied ? (React.createElement(Icon, { icon: IconProp.Check, className: `${iconSizes[size]} text-emerald-400` })) : (React.createElement(Icon, { icon: IconProp.Copy, className: `${iconSizes[size]}` }))),
        !props.iconOnly && React.createElement("span", null, copied ? copiedLabel : label)));
};
export default CopyTextButton;
//# sourceMappingURL=CopyTextButton.js.map