deckhearth/components/DeckBuilderDeckList.js

/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
import { ManaCost } from './ManaSymbols';
import { Button } from './ui';

/* 2026-06-04 design-sweep pass: same broken Tailwind tokens
   (bg-bg-*, text-text-*, bg-accent-ember, hover:bg-accent-ember-dark)
   that the other deck builder files had — none of those classes are
   defined in tailwind.config.js, so this list rendered with no
   visible card surfaces or hover affordances. Sweep replaces with
   inline CSS variables + Button primitive. Rarity badges reuse the
   neutral palette from DeckBuilderCardBrowser. */

const rarityBadgeStyle = (rarity) => {
  switch (rarity) {
    case 'mythic':
      return { backgroundColor: 'var(--accent-ember)', color: '#ffffff' };
    case 'rare':
      return { backgroundColor: 'var(--accent-flame)', color: '#ffffff' };
    case 'uncommon':
      return { backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-primary)' };
    default:
      return { backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' };
  }
};

export default function DeckBuilderDeckList({
  deckCards,
  sidebarOpen,
  onOpenSidebar,
  manaSymbolSettings,
  onAddCard,
  onRemoveCard,
}) {
  return (
    <div className="flex-1 overflow-y-auto space-y-2">
      {deckCards.length === 0 ? (
        <div className="text-center py-12">
          <div className="text-6xl mb-4">🃏</div>
          <h3
            className="text-xl font-semibold mb-2"
            style={{ color: 'var(--text-primary)' }}
          >
            Empty Deck
          </h3>
          <p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
            Start building your deck by searching for cards
          </p>
          {!sidebarOpen && (
            <Button variant="primary" onClick={onOpenSidebar}>
              Open Card Browser
            </Button>
          )}
        </div>
      ) : (
        deckCards
          .sort((a, b) => a.name.localeCompare(b.name))
          .map((card) => (
            <div
              key={`${card.card_id}-${card.id}`}
              className="flex items-center justify-between p-4 rounded-xl transition-colors nav-item-hover"
              style={{ backgroundColor: 'var(--bg-primary)' }}
            >
              <div className="flex items-center space-x-4">
                {card.image_url && (
                  <img
                    src={card.image_url}
                    alt={card.name}
                    className="w-14 h-20 object-cover rounded shadow-md"
                  />
                )}
                <div>
                  <h4
                    className="font-semibold text-lg"
                    style={{ color: 'var(--text-primary)' }}
                  >
                    {card.name}
                  </h4>
                  <p
                    className="text-sm"
                    style={{ color: 'var(--text-secondary)' }}
                  >
                    {card.set_name}
                  </p>
                  <div className="flex items-center space-x-3 mt-1">
                    {card.mana_cost && (
                      <div
                        className="px-2 py-1 rounded"
                        style={{ backgroundColor: 'var(--bg-secondary)' }}
                      >
                        <ManaCost
                          cost={card.mana_cost}
                          size="sm"
                          useSVG={manaSymbolSettings.useSVG}
                        />
                      </div>
                    )}
                    {card.rarity && (
                      <span
                        className="text-xs px-2 py-1 rounded capitalize"
                        style={rarityBadgeStyle(card.rarity)}
                      >
                        {card.rarity}
                      </span>
                    )}
                  </div>
                </div>
              </div>
              <div className="flex items-center space-x-3">
                <span
                  className="font-bold text-lg"
                  style={{ color: 'var(--text-primary)' }}
                >
                  {card.quantity}x
                </span>
                <div className="flex items-center space-x-1">
                  <button
                    onClick={() => onRemoveCard(card.card_id, 1)}
                    className="w-8 h-8 rounded-full transition-colors flex items-center justify-center font-bold text-white"
                    style={{ backgroundColor: '#dc2626' }}
                    aria-label="Remove one"
                  >
                    −
                  </button>
                  <button
                    onClick={() => onAddCard(card, 1)}
                    className="w-8 h-8 rounded-full transition-transform hover:scale-105 active:scale-95 flex items-center justify-center font-bold text-white"
                    style={{
                      background:
                        'linear-gradient(135deg, var(--accent-ember) 0%, var(--accent-flame) 100%)',
                      boxShadow: 'var(--rim-light-inner), var(--ember-rim-subtle)',
                    }}
                    aria-label="Add one"
                  >
                    +
                  </button>
                </div>
              </div>
            </div>
          ))
      )}
    </div>
  );
}