import React, { useEffect } from "react";
import Button from "../../../components/ui/Button";
import "./OptionsSection.css";

const OptionsSection = ({ server, onBack, onContinue }) => {
  const handleContinue = () => {
    const authData = JSON.parse(localStorage.getItem("user"));
    const token = authData?.token;

    if (!token || !server?.connectUrl) return;

    localStorage.setItem("activeServer", JSON.stringify(server));
    onContinue(server, token);
  };

  useEffect(() => {
    console.log(server);
  }, []);
  return (
    <div id="optionsSection" className="menu-section">
      <h2 className="server-section-title">
        {server?.serverName || "Game Options"}
      </h2>

      <div className="server-details">
        <div className="server-info-tags">
          {server?.isOfficial ? (
            <div className="badge official">
              <i className="fas fa-check-circle"></i> Official
            </div>
          ) : (
            <div className="badge modded">
              <i className="fas fa-tools"></i> Modded
            </div>
          )}

          {server?.region && (
            <span className="badge region">
              <i className="fas fa-globe-europe"></i> {server.region}
            </span>
          )}
        </div>

        {server?.description && (
          <div className="server-description">
            <p>{server.description}</p>
          </div>
        )}
      </div>

      <div className="options-actions">
        <Button
          variant="primary"
          size="large"
          icon="fa-gamepad"
          onClick={handleContinue}
          className="options-btn"
        >
          Connect to Server
        </Button>

        <Button
          variant="secondary"
          size="large"
          icon="fa-arrow-left"
          onClick={onBack}
          className="options-btn back-btn"
        >
          Back to List
        </Button>
      </div>
    </div>
  );
};

export default OptionsSection;
