import React from 'react';

interface CapturedPiecesProps {
    captured: string[]; // Array of piece types, e.g., ['p', 'n', 'q']
    color: 'w' | 'b'; // The color of the pieces (to display the correct icon)
    score?: number | null; // Material advantage, e.g., +2
}

const PIECE_ICONS: Record<string, string> = {
    'p': '♟',
    'n': '♞',
    'b': '♝',
    'r': '♜',
    'q': '♛',
    'k': '♚', // King is never captured, but for completeness
};

export const CapturedPieces: React.FC<CapturedPiecesProps> = ({ captured, color, score }) => {
    // Sort pieces by value for better display: Q, R, B, N, P
    const sortOrder = ['q', 'r', 'b', 'n', 'p'];
    const sortedPieces = [...captured].sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b));

    return (
        <div className="flex items-center h-8 gap-2 text-gray-600 dark:text-gray-300">
            <div className="flex -space-x-1 text-2xl leading-none select-none">
                {sortedPieces.map((piece, index) => (
                    <span key={index} className={color === 'w' ? "text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]" : "text-black"}>
                        {PIECE_ICONS[piece.toLowerCase()] || piece}
                    </span>
                ))}
            </div>
            {score && score > 0 && (
                <span className="text-xs font-semibold bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded text-gray-700 dark:text-gray-300">
                    +{score}
                </span>
            )}
        </div>
    );
};
