Паттерн Module (Модуль), челлендж: переключение цветовой темы и языка сайта

🎯 Задача

В приложении необходимо реализовать настройки пользовательского интерфейса: цветовую тему (светлая или тёмная) и выбранный язык.

🔍 Описание

Сейчас у вас есть статичная вёрстка. Она включает заголовок, кнопку смены темы «Сменить тему» и выпадающий список со списком языков:

• тема (светлая/тёмная) не переключается
• выбор языка не влияет на текст элементов
• логика управления состоянием отсутствует
• интерфейс не реагирует на действия пользователя

💡 Что нужно сделать

Реализуйте логику состояний для темы и языка. Инкапсулируйте её в отдельном модуле — кастомном React-хуке useSettings. Модуль не должен давать прямой доступ к внутренним переменным извне. Вместо этого он предоставляет набор публичных полей и методов для получения и изменения настроек.

Интегрируйте хук useSettings в App.js и свяжите UI-элементы с этой логикой так, чтобы:

• кнопка меняла тему: текущая тема должна влиять на CSS-класс контейнера <main> (например, className={theme})
• выбор языка в выпадающем списке обновлял язык интерфейса

Тексты заголовка, кнопки и подписи к выпадающему списку должны быть на языке из текущей настройки. Данные для переводов хранятся в объекте translations модуля translations.js.