import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function JoinStation() {
  const [verifyMethod, setVerifyMethod] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleJoinStation = () => {
    console.log('Joining station with password:', password);
    // Redirect to station page after joining
    navigate('/station');
  };

  return (
    <div className="join-station">
      <header className="join-station-header">
        <h1>Join a Station on Serena</h1>
      </header>

      <main className="join-station-content">
        <div className="verify-method-section">
          <h2>How would you like to verify access?</h2>
          
          <div className="radio-option">
            <label>
              <input
                type="radio"
                name="verifyMethod"
                value="password"
                checked={verifyMethod === 'password'}
                onChange={(e) => setVerifyMethod(e.target.value)}
              />
              Password
            </label>
          </div>

          {verifyMethod === 'password' && (
            <div className="password-input-section">
              <label htmlFor="station-password">Station Password:</label>
              <input
                type="password"
                id="station-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter station password"
              />
            </div>
          )}
        </div>

        <button 
          className="join-station-final-btn"
          onClick={handleJoinStation}
          disabled={verifyMethod !== 'password' || !password.trim()}
        >
          Join Station
        </button>
      </main>
    </div>
  );
}

export default JoinStation;