QueueCube/frontend/src/components/App.tsx

import React, { useState } from 'react';
import SongTable from './SongTable';
import NowPlaying from './NowPlaying';
import AddSongPanel from './AddSongPanel';
const App: React.FC = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [nowPlayingSong, setNowPlayingSong] = useState<string | null>(null);
  const [nowPlayingFileName, setNowPlayingFileName] = useState<string | null>(null);
  const [songs, setSongs] = useState<string[]>([]);

  const handleAddURL = (url: string) => {
    const urlToAdd = url.trim();
    if (urlToAdd) {
      setSongs([...songs, urlToAdd]);
    }
  };

  const handleDelete = (index: number) => {
    setSongs(songs.filter((_, i) => i !== index));
  };

  const handleSkipTo = (index: number) => {
    setNowPlayingSong(songs[index]);
    setNowPlayingFileName(songs[index].split('/').pop() || null);
    setIsPlaying(true);
  };

  return (
    <div className="flex items-center justify-center h-screen w-screen bg-black py-10">
      <div className="bg-violet-900 w-full md:max-w-xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
        <NowPlaying 
          className="flex flex-row md:rounded-t-2xl" 
          songName={nowPlayingSong || "(Not Playing)"} 
          fileName={nowPlayingFileName || ""} 
          isPlaying={isPlaying} 
          onPlayPause={() => setIsPlaying(!isPlaying)} 
          onStepForward={() => {}} 
          onStepBackward={() => {}} 
        />

        {songs.length > 0 ? (
          <SongTable 
            songs={songs}
            onDelete={handleDelete} 
            onSkipTo={handleSkipTo} 
          />
        ) : (
          <div className="flex items-center justify-center h-full">
            <div className="text-white text-2xl font-bold">Playlist is empty</div>
          </div>
        )}

        <AddSongPanel onAddURL={handleAddURL} />
      </div>
    </div>
  );
};

export default App;