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 [joinCode, setJoinCode] = useState("");

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

  return (
    <div className="create-station-container">
      <div className="create-station-main">
        {/* Left Section - Vinyl Animation */}
        <div className="create-station-left-section">
          <div className="create-station-vinyl-container">
            <div className="create-station-vinyl-record">
              <div className="vinyl-center"></div>
              <div className="vinyl-grooves"></div>
            </div>
            
            {/* Animated Music Notes */}
            <div className="create-station-music-notes">
              <div className="music-note note-1">♪</div>
              <div className="music-note note-2">♫</div>
              <div className="music-note note-3">♪</div>
            </div>
          </div>
        </div>

        {/* Right Section - Create Station Form */}
        <div className="create-station-right-section">
          <div className="create-station-content">
            <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>

        <p>your joinCode: {joinCode}</p>
      </main>
    </div>
    </div>
    </div>
    </div>
  );
}

export default CreateStation;