import Button from '../../../components/ui/Button';
import "./ServerConfirmationSection.css";

const ServerConfirmSection = ({ serverData, onBack, onJoin }) => {
  const server = serverData || {
    name: "Server Name",
    type: "Public",
    region: "US East",
    players: "0/10",
    owner: "Unknown"
  };

  return (
    <div id="serverConfirmSection" className="menu-section">
      <h2 className="section-title">Server Selected</h2>

      <div className="server-confirmation">
        <div className="confirm-actions-left">
          <Button variant="primary" size="large" icon="fa-sign-in-alt" onClick={onJoin}>
            Join Server
          </Button>
        </div>

        <div className="selected-server-info-center">
          <div className="server-preview">
            <h3 id="selectedServerName">{server.name}</h3>
            <div className="server-details">
              <p className="server-info">Type: <span>{server.type}</span></p>
              <p className="server-info">Region: <span>{server.region}</span></p>
              <p className="server-info">Players: <span>{server.players}</span></p>
              <p className="server-info">Owner: <span>{server.owner}</span></p>
            </div>
          </div>
        </div>

        <div className="confirm-actions-right">
          <Button variant="info" size="large" icon="fa-info">
            More Info
          </Button>
          <Button variant="warning" size="large" icon="fa-arrow-left" onClick={onBack}>
            Back to List
          </Button>
        </div>
      </div>
    </div>
  );
};

export default ServerConfirmSection;
