import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '@remotion/design';
import { useCallback, useState } from 'react';
import { ClipboardIcon } from './ClipboardIcon';
export const CopyPromptButton = ({ prompt }) => {
    const [copied, setCopied] = useState(false);
    const onCopy = useCallback(() => {
        navigator.clipboard.writeText(prompt);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    }, [prompt]);
    return (_jsx(Button, { className: "font-brand rounded-full flex items-center ", onClick: onCopy, style: { width: 160 }, depth: 0.6, children: _jsxs("div", { className: "flex items-center flex-row flex-1 w-[130px]", children: [_jsx(ClipboardIcon, { size: 20 }), _jsx("div", { className: "w-2" }), _jsx("div", { style: { fontSize: 14, flex: 1, textAlign: 'center' }, children: copied ? 'Copied prompt!' : 'Copy prompt' })] }) }));
};
