import React, { useState } from 'react';

function CreateStation() {
  const [joinMethod, setJoinMethod] = useState('');
  const [password, setPassword] = useState('');

  const handleCreateStation = () => {
    // Handle station creation logic here
    console.log('Creating station with password:', password);
  };

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

      <main className="create-station-content">
        <div className="join-method-section">
          <h2>How should people be able to join your station?</h2>
          
          <div className="radio-option">
            <label>
              <input
                type="radio"
                name="joinMethod"
                value="password"
                checked={joinMethod === 'password'}
                onChange={(e) => setJoinMethod(e.target.value)}
              />
              Password
            </label>
          </div>

          {joinMethod === '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="create-station-final-btn"
          onClick={handleCreateStation}
          disabled={joinMethod !== 'password' || !password.trim()}
        >
          Create Radio Station
        </button>
      </main>
    </div>
  );
}

export default CreateStation;