import React from 'react';
import { Flex } from '@workday/canvas-kit-react/layout';
import { colors } from '@workday/canvas-kit-react/tokens';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
export var InstallBlock = function (_a) {
    var command = _a.command, packageName = _a.packageName;
    var commandRef = React.useRef(null);
    var _b = React.useState(false), copied = _b[0], setCopied = _b[1];
    React.useEffect(function () {
        setTimeout(function () { return setCopied(false); }, 600);
    }, [copied]);
    var handleCopy = function () {
        setCopied(true);
        if (commandRef.current) {
            navigator.clipboard.writeText(commandRef.current.innerText);
        }
    };
    return (React.createElement(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap' },
        React.createElement("pre", { ref: commandRef },
            React.createElement("span", { style: { color: colors.blueberry200 } }, command),
            ' ',
            React.createElement("span", { style: { color: colors.frenchVanilla100 } }, packageName)),
        React.createElement(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small" }, copied ? 'Copied' : 'Copy')));
};
