QueueCube/frontend/src/components/SongTable.tsx

import React, { useEffect, useRef, useState } from "react";
import { FaPlay } from 'react-icons/fa';

const SongRow: React.FC<{ song: string }> = ({ song }) => {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);
  
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
        setShowDeleteConfirm(false);
      }
    };
    
    if (showDeleteConfirm) {
      document.addEventListener('click', handleClickOutside);
    }
    
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [showDeleteConfirm]);
  
  return (
    <div className="flex flex-row w-full h-[100px] bg-black/40 px-2 py-5 items-center border-b gap-2 hover:bg-black/50 transition-colors">
      <div className="flex flex-row gap-2">
        <button className="text-white/40 hover:text-white transition-colors px-3 py-1 bg-white/10 rounded">
          <FaPlay size={12} />
        </button>
      </div>
      
      <div className="flex-grow min-w-0">
        <div className="text-white text-md truncate">
          {song}
        </div>
      </div>
      
      <div className="flex flex-row gap-2">
        <button
          ref={buttonRef}
          className="text-red-500 px-3 py-1 bg-red-500/10 rounded"
          onClick={(e) => {
            e.stopPropagation();
            if (showDeleteConfirm) {
              // Handle delete here
              console.log('Deleting:', song);
            } else {
              setShowDeleteConfirm(true);
            }
          }}
        >
          {showDeleteConfirm ? 'Delete' : '×'}
        </button>
      </div>
    </div>
  );
};

const SongTable: React.FC = () => {
  const songs = Array.from({ length: 20 }, (_, index) => `Song ${index + 1}`);
  
  return (
    <div className="flex flex-col w-full h-full overflow-y-auto border-y">
      {songs.map((song, index) => (
        <SongRow key={index} song={song} />
      ))}
    </div>
  );
};

export default SongTable;