import React from 'react';
import TarotCard from './TarotCard';

export default function SpreadSlots({ spread, picks, onCardClick }) {
  return (
    <div className="tarot-slots">
      {spread.positions.map((pos) => {
        const pick = picks[pos.idx];
        return (
          <div key={pos.idx} className="tarot-slots__cell">
            <div className="tarot-slots__label">{pos.label}</div>
            {pick ? (
              <TarotCard
                card={pick.card}
                reversed={pick.reversed}
                clickable
                onClick={() => onCardClick(pos.idx)}
              />
            ) : (
              <div className="tarot-slots__empty">_</div>
            )}
          </div>
        );
      })}
    </div>
  );
}
