import React, { useState } from 'react';
import { createStation } from '../utils/StationsCreate';

// I UNDERSTAND THIS!! --Noah

function CreateStation() {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");

  const handleCreateStation = () => {
    createStation(name, description);
  };

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

      <main className="create-station-content">
        <textarea onChange={(e) => setName(e.target.value)} />
        <textarea onChange={(e) => setDescription(e.target.value)} />

        <button 
          className="create-station-final-btn"
          onClick={handleCreateStation}
          disabled={!name || !description}
        >
          Create Radio Station
        </button>
      </main>
    </div>
  );
}


export default CreateStation;