import { Suit, getMajorArcana, getMinorArcanaBySuit } from "@/app/lib/tarotCards";
import { CardImageEntry } from "@/app/lib/tarotParse";

import TarotCardVisual from "./TarotCardVisual";

const SUITS: { suit: Suit; label: string }[] = [
  { suit: "wands", label: "Wands" },
  { suit: "cups", label: "Cups" },
  { suit: "swords", label: "Swords" },
  { suit: "pentacles", label: "Pentacles" },
];

interface Props {
  /** Real artwork per card slug, from GET /user/tarot/cards — falls back to the CSS placeholder per-card when absent. */
  imageMap?: Record<string, CardImageEntry>;
}

/*
|--------------------------------------------------------------------------
| Full 78-card Tarot Deck Grid
|--------------------------------------------------------------------------
*/

export default function TarotDeckGrid({ imageMap = {} }: Props) {
  return (
    <>
      <section className="tarot-section-card">
        <h2>
          Major Arcana <span className="tarot-heading-sub">(22 Cards)</span>
        </h2>

        <div className="tarot-deck-grid">
          {getMajorArcana().map((card) => (
            <TarotCardVisual
              key={card.slug}
              card={card}
              size="sm"
              href={`/tarot/${card.slug}`}
              imageUrl={imageMap[card.slug]?.upright}
            />
          ))}
        </div>
      </section>

      {SUITS.map(({ suit, label }) => (
        <section className="tarot-section-card" key={suit}>
          <h2>
            Suit of {label} <span className="tarot-heading-sub">(14 Cards)</span>
          </h2>

          <div className="tarot-deck-grid">
            {getMinorArcanaBySuit(suit).map((card) => (
              <TarotCardVisual
                key={card.slug}
                card={card}
                size="sm"
                href={`/tarot/${card.slug}`}
                imageUrl={imageMap[card.slug]?.upright}
              />
            ))}
          </div>
        </section>
      ))}
    </>
  );
}