import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useTheme } from '../theme';
import { ChatSettingsSection } from './ChatSettingsSection';
import { ModelSettingsSection } from './ModelSettingsSection';
import { McpServerSection } from './McpServerSection';
import { SystemSettingsSection } from './SystemSettingsSection';
import { Tabs } from './Tabs';
import { TabPanel } from './TabPanel';
const PlaygroundSettingsInner = ({ onClose }) => {
    const theme = useTheme();
    const [activeTab, setActiveTab] = React.useState('chat');
    return (_jsxs("div", { className: theme.playgroundSettings.container, children: [_jsxs("div", { className: theme.playgroundSettings.header, children: [_jsx(Tabs, { activeTab: activeTab, onTabChange: setActiveTab }), onClose && (_jsx("button", { type: 'button', onClick: onClose, className: theme.playgroundSettings.backButton, children: "Back" }))] }), _jsxs("div", { className: theme.playgroundSettings.body, children: [_jsx(TabPanel, { isActive: activeTab === 'chat', tabId: 'chat', children: _jsx(ChatSettingsSection, {}) }), _jsx(TabPanel, { isActive: activeTab === 'models', tabId: 'models', children: _jsx(ModelSettingsSection, {}) }), _jsx(TabPanel, { isActive: activeTab === 'servers', tabId: 'servers', children: _jsx(McpServerSection, {}) }), _jsx(TabPanel, { isActive: activeTab === 'system', tabId: 'system', children: _jsx(SystemSettingsSection, {}) })] })] }));
};
export const PlaygroundSettings = (props) => (_jsx(PlaygroundSettingsInner, { ...props }));
export default PlaygroundSettings;
