web/src/components/PromotionDialog.tsx

import * as React from 'react';
import { playSound } from '../services/soundService';

interface PromotionDialogProps {
  isOpen: boolean;
  position: { x: number; y: number };
  color: 'white' | 'black';
  onSelect: (piece: string) => void;
  onCancel: () => void;
}

const PromotionDialog: React.FC<PromotionDialogProps> = ({ 
  isOpen, 
  position, 
  color, 
  onSelect, 
  onCancel 
}) => {
  if (!isOpen) return null;

  const pieces = ['queen', 'rook', 'bishop', 'knight'];
  
  const handleSelect = (piece: string) => {
    playSound('promote');
    onSelect(piece);
  };

  // Position the dialog near the promotion square
  const style: React.CSSProperties = {
    position: 'absolute',
    left: `${position.x}px`,
    top: `${position.y}px`,
    transform: 'translate(-50%, -50%)',
    zIndex: 1000
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={onCancel}>
      <div 
        className="bg-white rounded-lg shadow-lg p-4 flex flex-col items-center"
        style={style}
        onClick={(e) => e.stopPropagation()}
      >
        <h3 className="text-lg font-medium mb-3">Promote to</h3>
        <div className="grid grid-cols-2 gap-2">
          {pieces.map((piece) => (
            <div 
              key={piece}
              className="w-16 h-16 flex items-center justify-center border rounded cursor-pointer hover:bg-gray-100"
              onClick={() => handleSelect(piece)}
            >
              <div 
                className="w-12 h-12 bg-contain bg-center bg-no-repeat"
                style={{ backgroundImage: `url(/assets/pieces/${color[0]}_${piece}_1x.png)` }}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PromotionDialog;