// CardBox — 3D collection box on the shelf, next to the VHS cubby.
// Pure CSS 3D cube with a glowing interior. (Lid removed per Aaron's request.)
// Click to open the album.

function CardBox({ onClick, ownedCount, totalCount, locked }) {
  return (
    <div className={"cardbox-wrap" + (locked ? " locked" : "")}>
      <button
        className="cardbox"
        onClick={locked ? undefined : onClick}
        aria-label="Abrir colección"
        disabled={locked}
      >
        <div className="cardbox-glow" />
        <div className="cardbox-3d">
          <div className="cardbox-face cardbox-front" />
          <div className="cardbox-face cardbox-back" />
          <div className="cardbox-face cardbox-left" />
          <div className="cardbox-face cardbox-right" />
          <div className="cardbox-face cardbox-bottom" />
          <div className="cardbox-light" />
          <div className="cardbox-card-stack">
            <div className="cardbox-card-peek cardbox-card-peek-1" />
            <div className="cardbox-card-peek cardbox-card-peek-2" />
            <div className="cardbox-card-peek cardbox-card-peek-3" />
          </div>
        </div>
        <div className="cardbox-label">
          <div className="cardbox-label-eyebrow">COLECCIÓN</div>
          <div className="cardbox-label-count">
            {ownedCount}<span className="cardbox-label-of">/{totalCount}</span>
          </div>
        </div>
      </button>
    </div>
  );
}

window.CardBox = CardBox;