import React, { useState } from "react";
import { useSocket } from "../../../hooks/useSocket";
import SettingsModal from "./SettingsModal";
import "./GameHeader.css";

const GameHeader = ({ onReturn }) => {
  const { disconnectFromServer } = useSocket();
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);

  const handleHomeClick = () => {
    localStorage.removeItem("activeServer");
    disconnectFromServer();
    if (onReturn) {
      onReturn();
    }
  };

  return (
    <>
      <header className="game-header">
        <div className="header-left">
          <h1 className="logo">GSO</h1>
          <div className="player-info">
            <span className="player-name">Commander</span>
            <span className="player-level">Lv. 1</span>
          </div>
        </div>

        <div className="header-center">
          <div className="resources">
            <div className="resource">
              <i className="fas fa-bolt"></i>
              <span>100/100</span>
            </div>
          </div>
        </div>

        <div className="header-right">
          <button
            className="btn btn-secondary"
            onClick={() => setIsSettingsOpen(true)}
            style={{ marginRight: "10px" }}
          >
            <i className="fas fa-cog"></i>
          </button>

          <button className="btn btn-warning" onClick={handleHomeClick}>
            <i className="fas fa-home"></i>
          </button>
        </div>
      </header>

      {isSettingsOpen && (
        <SettingsModal onClose={() => setIsSettingsOpen(false)} />
      )}
    </>
  );
};

export default GameHeader;