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;