QueueCube/frontend/src/components/SongRow.tsx

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

interface SongRowProps {
  song: string;
  onDelete: () => void;
  onPlay: () => void;
}

const SongRow: React.FC<SongRowProps> = ({ song, onDelete, onPlay }) => {
  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"
          onClick={onPlay}
        >
          <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) {
              setShowDeleteConfirm(false);
              onDelete();
            } else {
              setShowDeleteConfirm(true);
            }
          }}
        >
          {showDeleteConfirm ? 'Delete' : '×'}
        </button>
      </div>
    </div>
  );
};

export default SongRow;