"use client";

import { makeCard, RANK_VALUES_DESC, type CardId } from "@/lib/poker/cards";
import { PaletteCell } from "./cards-ui";

const SUITS = [0, 1, 2, 3]; // ♠ ♥ ♦ ♣ — one row each (4-colour deck)

/** The 52-card selector at the top: 4 suit rows × 13 ranks. */
export function Palette({
  used,
  onPick,
}: {
  used: Set<CardId>;
  onPick: (card: CardId) => void;
}) {
  return (
    <div className="grid grid-cols-[repeat(13,minmax(0,1fr))] gap-[3px]">
      {SUITS.map((suit) =>
        RANK_VALUES_DESC.map((rank) => {
          const card = makeCard(rank, suit);
          return (
            <PaletteCell key={card} card={card} used={used.has(card)} onClick={() => onPick(card)} />
          );
        }),
      )}
    </div>
  );
}