import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { ThemeProvider } from 'styled-components';
import { Button } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import PrismCode from '../PrismCode';
import { copyToClipboard } from '../utils';
const StyledCodeSnippet = styled.div `
  display: flex;
  border-radius: 4px;
  background: ${(props) => props.theme.background};
  width: 100%;
  max-width: 100%;
`;
const ButtonWrapper = styled.div `
  position: relative;

  button,
  button:hover,
  button:focus {
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    color: var(--primary-color);
  }

  [ant-click-animating-without-extra-node]:after {
    animation: none !important;
  }

  ::after {
    display: block;
    content: '';
    width: 16px;
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    background: linear-gradient(
      to right,
      ${(props) => `${props.theme.background}00`},
      ${(props) => props.theme.background}
    );
  }
`;
export function CodeSnippet({ code, language, style, copyMessage, theme = 'dark', }) {
    return (_jsx(ThemeProvider, { theme: {
            background: theme === 'dark' ? '#F6F6F8' : '#FFFFFF',
        }, children: _jsxs(StyledCodeSnippet, { style: style, children: [_jsx(PrismCode, { code: code, language: language, style: { flexGrow: 1 } }), _jsx(ButtonWrapper, { children: _jsx(Button, { icon: _jsx(CopyOutlined, {}), onClick: () => copyToClipboard(code, copyMessage || 'Copied') }) })] }) }));
}
//# sourceMappingURL=CodeSnippet.js.map