import "highlight.js/styles/a11y-dark.css";
import React, { useState } from "react";
import Highlight from "react-highlight";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
const CodeBlock = (props) => {
    const [copied, setCopied] = useState(false);
    const handleCopy = () => {
        if (typeof props.code === "string") {
            navigator.clipboard.writeText(props.code).catch(() => {
                /* ignore clipboard errors */
            });
            setCopied(true);
            setTimeout(() => {
                setCopied(false);
            }, 2000);
        }
    };
    const maxHeight = props.maxHeight || "500px";
    const showCopyButton = props.showCopyButton !== false;
    return (React.createElement("div", { className: "relative group" },
        showCopyButton && typeof props.code === "string" && (React.createElement("button", { onClick: handleCopy, className: "absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-0 group-hover:opacity-100 z-10", title: copied ? "Copied!" : "Copy to clipboard", type: "button" },
            React.createElement(Icon, { icon: copied ? IconProp.Check : IconProp.Copy, className: "h-4 w-4" }))),
        React.createElement("div", { className: "overflow-auto rounded-lg border border-gray-700", style: { maxHeight: maxHeight } },
            React.createElement(Highlight, { className: `p-4 language-${props.language} text-sm leading-relaxed` }, props.code))));
};
export default CodeBlock;
//# sourceMappingURL=CodeBlock.js.map