import React, { useState } from "react";
import GameDataManager from "../../../services/GameDataManager.js";
import "./SettingsModal.css";

const SettingsModal = ({ onClose }) => {
  const [currentLang, setCurrentLang] = useState(GameDataManager.currentLang);

  const languages = [
    { code: "en_US", name: "English" },
    { code: "fr_FR", name: "French" },
    { code: "uk_UA", name: "Ukrainian" },
  ];

  const handleLanguageChange = (langCode) => {
    GameDataManager.setLanguage(langCode);
    localStorage.setItem("selected_lang", langCode);
    setCurrentLang(langCode);
  };

  return (
    <div className="settings-overlay" onClick={onClose}>
      <div className="settings-modal" onClick={(e) => e.stopPropagation()}>
        <div className="settings-header">
          <span className="settings-title">SYSTEM_SETTINGS</span>
          <button className="close-x" onClick={onClose}>
            &times;
          </button>
        </div>

        <div className="settings-body">
          <section className="settings-section">
            <label className="section-label">LANGUAGE_INTERFACE</label>
            <div className="lang-selector">
              {languages.map((lang) => (
                <button
                  key={lang.code}
                  className={`lang-option ${currentLang === lang.code ? "active" : ""}`}
                  onClick={() => handleLanguageChange(lang.code)}
                >
                  <span className="lang-indicator"></span>
                  {lang.name}
                </button>
              ))}
            </div>
          </section>
        </div>

        <div className="settings-footer">
          <button className="btn-confirm" onClick={onClose}>
            CLOSE_MENU
          </button>
        </div>
      </div>
    </div>
  );
};

export default SettingsModal;