import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ServerTitleWithStatus from './ServerTitleWithStatus';
import DeleteServerButton from './DeleteServerButton';
import { useTheme } from '../theme/ThemeContext';
import { formatConnectionTarget, formatTransportLabel } from '../lib/mcpConnection';
const ServerErrorView = ({ options, error, onRetry, onEdit, onDelete }) => {
    const theme = useTheme();
    const target = formatConnectionTarget(options);
    const transport = formatTransportLabel(options.transportMode);
    const subtitle = `${transport} · ${target}`;
    const failureMessage = options.transportMode === 'stdio'
        ? `Could not start ${target}. Please review the server settings and try again.`
        : `Could not connect to ${target}. Please review the server settings and try again.`;
    return (_jsxs("div", { className: theme.serverError.container, children: [_jsx(ServerTitleWithStatus, { title: options.serverName, subtitle: subtitle, status: { label: 'Connection failed', tone: 'error' }, onDelete: onDelete }), _jsxs("div", { className: theme.serverError.alert, children: [_jsx("h4", { className: theme.serverError.alertTitle, children: "Connection Failed" }), _jsx("p", { className: theme.serverError.alertBody, children: failureMessage }), 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;
