import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Alert, Form, Space, Typography } from 'antd';
import styled from 'styled-components';
import { CopiableInput } from '../../../components/CopiableInput';
import { copyToClipboard } from '../../../utils';
const StyledAlert = styled(Alert) `
  border: none;
  padding: 16px;
`;
const StyledForm = styled(Form) `
  .ant-form-item {
    margin-bottom: 20px;
  }

  .ant-form-item:last-child {
    margin-bottom: 0;
  }

  .ant-form-item-label {
    padding-bottom: 4px;
  }
`;
export function LocalhostTipBox({ onHostnameCopy }) {
    return (_jsx(StyledAlert, { "data-testid": "wizard-localhost-tipbox", type: "warning", message: _jsxs(Space, { direction: "vertical", size: "middle", children: [_jsxs(Typography.Text, { children: ["To connect to the database running on the localhost use the following ", _jsx("b", { children: "hostname" }), " value"] }), _jsxs(StyledForm, { children: [_jsx(CopiableInput, { label: "Mac", value: "host.docker.internal", onCopyClick: onHostnameCopy }), _jsx(CopiableInput, { label: "Windows", value: "host.docker.internal", onCopyClick: onHostnameCopy }), _jsx(CopiableInput, { label: "Linux", value: "localhost", onCopyClick: onHostnameCopy }), _jsxs(Space, { direction: "vertical", size: "middle", children: [_jsxs(Typography.Text, { children: ["Please note, for Linux, you need to run Cube Docker container in the", ' ', _jsx(Typography.Link, { href: "https://docs.docker.com/network/host/", target: "_blank", children: "network mode \"host\"" }), ' ', "to be able to connect to the database running on localhost."] }), _jsx(CopiableInput, { value: "docker run --network host", onCopyClick: (value) => copyToClipboard(value) })] })] })] }) }));
}
//# sourceMappingURL=LocalhostTipBox.js.map