class ModelSelector extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            selectedMode: 'Smart (GPT-5)'
        };
    }

    toggleDropdown = () => {
        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
    };

    selectMode = (mode) => {
        this.setState({
            selectedMode: mode,
            isOpen: false
        });
        this.props.onModeChange(mode);
    };

    render() {
        const modes = [
            { name: 'Smart (GPT-5)', desc: 'Most capable model for complex tasks' },
            { name: 'Quick response', desc: 'Fast answers for simple questions' },
            { name: 'Think Deeper', desc: 'More creative and detailed responses' },
            { name: 'Study and learn', desc: 'Educational explanations and breakdowns' },
            { name: 'Search', desc: 'Web-connected information retrieval' }
        ];

        return (
            <div className="relative">
                <button
                    onClick={this.toggleDropdown}
                    className="flex items-center justify-between w-full px-4 py-2 bg-secondary border border-gray-600 rounded-lg hover:bg-gray-700 transition-colors"
                >
                    <span>{this.state.selectedMode}</span>
                    <i data-feather="chevron-down" className="w-4 h-4 ml-2"></i>
                </button>

                {this.state.isOpen && (
                    <div className="absolute z-10 mt-1 w-full bg-secondary border border-gray-600 rounded-lg shadow-lg overflow-hidden">
                        {modes.map((mode, index) => (
                            <div
                                key={index}
                                onClick={() => this.selectMode(mode.name)}
                                className="px-4 py-3 hover:bg-gray-700 cursor-pointer transition-colors"
                            >
                                <div className="font-medium">{mode.name}</div>
                                <div className="text-sm text-gray-400">{mode.desc}</div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        );
    }
}