import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box, Stack, Typography } from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Copyable({
  text,
  children = null,
  style = {}
}) {
  const {
    locale
  } = useLocaleContext();
  return /*#__PURE__*/_jsx(CopyButton, {
    showTooltip: false,
    content: text,
    locale: locale,
    style: style,
    render: ({
      copyButton,
      containerRef
    }) => /*#__PURE__*/_jsxs(Stack, {
      ref: containerRef,
      direction: "row",
      sx: {
        alignItems: 'center',
        color: 'text.secondary'
      },
      children: [children || /*#__PURE__*/_jsx(Typography, {
        className: "copyable-text",
        component: "span",
        sx: {
          mr: 0.5,
          maxWidth: 480,
          wordBreak: 'break-all',
          whiteSpace: 'break-spaces',
          minWidth: '60px'
        },
        children: text
      }), /*#__PURE__*/_jsx(Box, {
        sx: {
          height: '1em'
        },
        children: copyButton
      })]
    })
  });
}
Copyable.propTypes = {
  text: PropTypes.string.isRequired,
  children: PropTypes.node,
  style: PropTypes.object
};