import React from 'react';

export default function BlankCardsCounter({ index, blankCardsCount, handleBlankCardChange }) {
  
  const maxCardsPerRow = 7;
  const rows = [];
  for (let i = 0; i < blankCardsCount; i += maxCardsPerRow) {
    rows.push(Array.from({ length: Math.min(maxCardsPerRow, blankCardsCount - i) }));
  }

  return (
    <div className="flex flex-col items-center w-full">
      
      {/* Bloque de botones */}
      <div className="flex items-center gap-1 bg-white px-2 py-1.5 rounded-full shadow-sm border border-slate-200 z-10 relative shrink-0">
        <button 
          onClick={() => handleBlankCardChange(index, -1)}
          className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
        >-</button>
        
        <div className="flex flex-col items-center leading-none min-w-[3rem]">
          <span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Blancas</span>
          <span className="text-base font-black text-blue-600 leading-none">{blankCardsCount}</span>
        </div>
        
        <button 
          onClick={() => handleBlankCardChange(index, 1)}
          className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
        >+</button>
      </div>

      {/* Cartas blancas */}
      {blankCardsCount > 0 && (
        <div className="flex flex-col items-center gap-y-2 w-full mt-3 relative z-0">
          {rows.map((row, rowIndex) => (
            <div key={rowIndex} className="flex flex-row items-center justify-center -space-x-4">
              {row.map((_, colIndex) => (
                <div 
                  key={`${rowIndex}-${colIndex}`} 
                  className="w-8 h-12 bg-white border-2 border-dashed border-slate-300 rounded shadow-sm opacity-90 transition-all hover:-translate-y-1"
                  style={{ zIndex: colIndex }}
                ></div>
              ))}
            </div>
          ))}
        </div>
      )}

    </div>
  );
}