components/GameControls.js

export default function GameControls({ turn, onReset, historyLength }) {
  return (
    <div className="comic-card space-y-4">
      <div className="flex items-center justify-between border-b-4 border-black pb-4 mb-4">
        <h2 className="font-['Bangers'] text-2xl">Game Status</h2>
        <div className={`px-3 py-1 border-2 border-black font-bold text-sm uppercase ${turn === 'white' ? 'bg-white' : 'bg-black text-white'}`}>
          {turn}'s Turn
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <button 
          onClick={onReset}
          className="comic-btn bg-comic-red text-white w-full flex items-center justify-center gap-2"
        >
          <span>↺</span> Reset
        </button>
        <button className="comic-btn bg-comic-blue text-white w-full opacity-50 cursor-not-allowed">
          Undo
        </button>
      </div>

      <div className="bg-gray-100 border-2 border-black p-3 rounded-sm">
        <div className="flex justify-between text-xs font-bold uppercase mb-1">
          <span>Moves</span>
          <span>{Math.ceil(historyLength / 2)}</span>
        </div>
        <div className="w-full bg-gray-300 h-2 border border-black">
          <div 
            className="bg-comic-yellow h-full border-r-2 border-black transition-all duration-500" 
            style={{ width: `${Math.min((historyLength / 80) * 100, 100)}%` }} 
          />
        </div>
      </div>
    </div>
  );
}