import React from 'react'
import { Color, PieceSymbol } from 'chess.js'
import { ChessPiece } from './ChessPiece'
import '../styles/PromotionDialog.css'

export const PromotionDialog: React.FC<{
  isVisible: boolean
  color: Color
  onSelect: (piece: 'q' | 'r' | 'b' | 'n') => void
}> = ({
  isVisible,
  color,
  onSelect
}) => {
  if (!isVisible) return null

  const promotionPieces: Array<{ type: 'q' | 'r' | 'b' | 'n'; symbol: string }> = [
    { type: 'q', symbol: color === 'w' ? '♕' : '♛' },
    { type: 'r', symbol: color === 'w' ? '♖' : '♜' },
    { type: 'b', symbol: color === 'w' ? '♗' : '♝' },
    { type: 'n', symbol: color === 'w' ? '♘' : '♞' }
  ]

  return (
    <div className="promotion-dialog-overlay">
      <div className="promotion-dialog">
        <div className="promotion-dialog-title">
          Choose Promotion Piece
        </div>
        <div className="promotion-buttons">
          {promotionPieces.map(({ type, symbol }) => (
            <button
              key={type}
              className="promotion-button"
              onClick={() => onSelect(type)}
            >
              <ChessPiece
                piece={{ type: type as PieceSymbol, color }}
                size={48}
              />
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}