import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import DeleteServerButton from './DeleteServerButton';
const ServerTitleWithStatus = ({ title, url, status, onDelete }) => {
    const toneClasses = status.tone === 'info'
        ? 'bg-blue-100 text-blue-800'
        : 'bg-red-100 text-red-800';
    return (_jsxs("div", { className: 'flex items-start justify-between gap-4', children: [_jsxs("div", { children: [_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx("h3", { className: 'text-lg font-medium text-gray-900', children: title }), _jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${toneClasses}`, children: status.label })] }), _jsx("p", { className: 'mt-1 text-sm text-gray-500', children: url })] }), _jsx(DeleteServerButton, { onClick: onDelete, variant: 'soft' })] }));
};
export default ServerTitleWithStatus;
