import TarotCardBack from "./TarotCardBack";

interface Props {
  /** Card-back artwork candidates in priority order — falls through on load error since the top style has been observed 404ing. */
  backImageCandidates?: string[];
  count?: number;
  onPick: () => void;
  disabled?: boolean;
}

/*
|--------------------------------------------------------------------------
| Tarot Card Picker (face-down fan)
|--------------------------------------------------------------------------
|
| A row of face-down cards the user taps to draw — any card can be
| tapped since the actual draw is random regardless of which one is
| clicked. Purely an interaction ritual, matching the "pick a card"
| step on the reference site.
|
*/

export default function TarotCardPicker({
  backImageCandidates = [],
  count = 24,
  onPick,
  disabled,
}: Props) {
  return (
    <div className="tarot-picker-row">
      {Array.from({ length: count }).map((_, index) => (
        <button
          key={index}
          type="button"
          className="tarot-picker-card"
          onClick={onPick}
          disabled={disabled}
          aria-label="Pick this card"
        >
          <TarotCardBack candidates={backImageCandidates} />
        </button>
      ))}
    </div>
  );
}