class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMode: 'Smart (GPT-5)'
        };
    }

    handleModeChange = (mode) => {
        this.setState({ currentMode: mode });
    };

    handleSendMessage = (message) => {
        console.log(`Sending message in ${this.state.currentMode} mode:`, message);
        // Here you would typically call your API
    };

    handleSuggestionClick = (suggestion) => {
        console.log(`Selected suggestion:`, suggestion);
        // Here you would handle the suggestion selection
    };

    render() {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center px-4 pb-20">
                <Header />
                <div className="w-full max-w-2xl mb-6">
                    <ModelSelector onModeChange={this.handleModeChange} />
                </div>
                <MessageInput onSend={this.handleSendMessage} />
                <Suggestions onSuggestionClick={this.handleSuggestionClick} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));