import React from 'react'
import { ChessPiece as ChessPieceType } from '../types/chess'
import '../styles/ChessPiece.css'

export const ChessPiece: React.FC<{
  piece: ChessPieceType
  size: number
}> = ({ 
  piece, 
  size, 
}) => {

  const getPieceImagePath = () => {
    const color = piece.color === 'w' ? 'white' : 'dark'
    const orientation = 'upright'
    
    const pieceFileMap: { [key: string]: string } = {
      'k': piece.color === 'w' ? 'Chess_klt45.svg' : 'Chess_kdt45.svg',
      'q': piece.color === 'w' ? 'Chess_qlt45.svg' : 'Chess_qdt45.svg',
      'r': piece.color === 'w' ? 'Chess_rlt45.svg' : 'Chess_rdt45.svg',
      'b': piece.color === 'w' ? 'Chess_blt45.svg' : 'Chess_bdt45.svg',
      'n': piece.color === 'w' ? 'Chess_nlt45.svg' : 'Chess_ndt45.svg',
      'p': piece.color === 'w' ? 'Chess_plt45.svg' : 'Chess_pdt45.svg'
    }
    
    const fileName = pieceFileMap[piece.type]
    return `/assets/pieces/${color}/${orientation}/${fileName}`
  }

  return (
    <div
      className="chess-piece"
      style={{
        width: size,
        height: size
      }}
    >
      <img
        src={getPieceImagePath()}
        alt={`${piece.color === 'w' ? 'White' : 'Black'} ${piece.type}`}
        width={size}
        height={size}
        className="piece-image"
        draggable={false}
      />
    </div>
  )
}