export default function MoveHistory({ history }) {
  return (
    <div className="comic-card h-[300px] flex flex-col">
      <h3 className="font-['Bangers'] text-xl mb-3 border-b-4 border-black pb-2 flex items-center gap-2">
        <span>📜</span> Battle Log
      </h3>
      
      <div className="flex-1 overflow-y-auto space-y-2 pr-2 custom-scrollbar">
        {history.length === 0 ? (
          <div className="text-center text-gray-500 font-bold py-10 italic">
            "The battle begins..."
          </div>
        ) : (
          history.map((move, i) => (
            <div key={i} className="flex items-center gap-2 text-sm font-bold animate-slide-in">
              <span className="bg-black text-white w-6 h-6 flex items-center justify-center rounded-full text-xs">
                {Math.floor(i / 2) + 1}
              </span>
              <span className={i % 2 === 0 ? 'text-comic-blue' : 'text-comic-red'}>
                {getPieceName(move.piece)}
              </span>
              <span className="text-gray-600">
                {String.fromCharCode(97 + move.from.c)}{8 - move.from.r} → {String.fromCharCode(97 + move.to.c)}{8 - move.to.r}
              </span>
            </div>
          ))
        )}
        <div ref={(el) => el?.scrollIntoView({ behavior: 'smooth' })} />
      </div>
    </div>
  );
}

const getPieceName = (p) => {
  const names = {
    'P': 'Pawn', 'N': 'Knight', 'B': 'Bishop', 'R': 'Rook', 'Q': 'Queen', 'K': 'King',
    'p': 'Pawn', 'n': 'Knight', 'b': 'Bishop', 'r': 'Rook', 'q': 'Queen', 'k': 'King',
  };
  return names[p] || p;
};