import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ServerTitleWithStatus from './ServerTitleWithStatus';
import DeleteServerButton from './DeleteServerButton';
import { useTheme } from '../theme/ThemeContext';
const ServerErrorView = ({ options, error, onRetry, onEdit, onDelete }) => {
    const theme = useTheme();
    return (_jsxs("div", { className: theme.serverError.container, children: [_jsx(ServerTitleWithStatus, { title: options.serverName, url: options.url, status: { label: 'Connection failed', tone: 'error' }, onDelete: onDelete }), _jsxs("div", { className: theme.serverError.alert, children: [_jsx("h4", { className: theme.serverError.alertTitle, children: "Connection Failed" }), _jsxs("p", { className: theme.serverError.alertBody, children: ["Could not connect to ", options.url, ". Please review the server settings and try again."] }), error && _jsx("p", { className: theme.serverError.alertError, children: error.message })] }), _jsxs("div", { className: theme.serverError.actions, children: [_jsx("button", { onClick: onRetry, className: theme.serverError.retryButton, children: "Retry" }), _jsx("button", { onClick: onEdit, className: theme.serverError.editButton, children: "Edit Connection" }), _jsx(DeleteServerButton, { onClick: onDelete, variant: 'outline' })] })] }));
};
export default ServerErrorView;
