deckhearth/components/DecksGrid.js

import Link from 'next/link';
import { Button } from './ui';
import { DECK_FORMAT_BADGE_STYLE, getDeckFormatIcon } from '../lib/deck-format-utils.js';

export default function DecksGrid({ decks, onEditDeck, onDeleteDeck, onCreateDeck }) {
  if (decks.length === 0) {
    return (
      <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)' }}>
          No decks yet
        </h3>
        <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
          Create your first deck to get started
        </p>
        <Button variant="primary" onClick={onCreateDeck}>
          Create Your First Deck
        </Button>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {decks.map((deck) => (
        <div key={deck.id} className="glass-panel rounded-2xl p-6 transition-shadow">
          <div className="flex justify-between items-start mb-4">
            <div className="flex items-center space-x-2">
              <span className="text-2xl">{getDeckFormatIcon(deck.format)}</span>
              <span
                className="px-2 py-1 rounded-full text-xs font-medium"
                style={DECK_FORMAT_BADGE_STYLE}
              >
                {deck.format}
              </span>
            </div>
            <div className="flex space-x-2">
              <button
                type="button"
                onClick={() => onEditDeck({ ...deck })}
                className="transition-colors"
                style={{ color: 'var(--text-secondary)' }}
                aria-label="Edit deck"
              >
                ✏️
              </button>
              <button
                type="button"
                onClick={() => onDeleteDeck(deck.id)}
                className="transition-colors"
                style={{ color: 'var(--text-secondary)' }}
                aria-label="Delete deck"
              >
                🗑️
              </button>
            </div>
          </div>

          <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
            {deck.name}
          </h3>

          {deck.description && (
            <p
              className="text-sm mb-4 line-clamp-2"
              style={{ color: 'var(--text-secondary)' }}
            >
              {deck.description}
            </p>
          )}

          <div
            className="flex justify-between items-center text-sm mb-4"
            style={{ color: 'var(--text-secondary)' }}
          >
            <span>{deck.card_count || 0} cards</span>
            {deck.is_public && (
              <span style={{ color: 'var(--accent-ember)' }}>Public</span>
            )}
          </div>

          <div className="flex space-x-2">
            <Link href={`/deck-builder?deck=${deck.id}`} className="flex-1">
              <Button variant="primary" size="md" className="w-full">
                Edit Deck
              </Button>
            </Link>
            <Link href={`/deck/${deck.id}`} className="flex-1">
              <Button variant="secondary" size="md" className="w-full">
                View
              </Button>
            </Link>
          </div>
        </div>
      ))}
    </div>
  );
}