deckhearth/components/CardEditorSearchPanel.js

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

/**
 * Admin card editor: search input + result grid for picking a card to edit.
 */
export default function CardEditorSearchPanel({
  searchQuery,
  onSearchQueryChange,
  searchLoading,
  searchResults,
  onSelectCard,
}) {
  return (
    <div className="glass-panel mb-8 p-6 rounded-xl">
      <h2
        className="text-xl font-semibold mb-4"
        style={{ color: 'var(--text-primary)' }}
      >
        Find Card to Edit
      </h2>

      <div className="flex gap-4 mb-4">
        <div className="flex-1">
          <SearchBar
            value={searchQuery}
            onChange={(e) => onSearchQueryChange(e.target.value)}
            onClear={() => onSearchQueryChange('')}
            placeholder="Search for cards by name…"
          />
        </div>
      </div>

      {searchLoading && (
        <div className="text-center py-4">
          <div
            className="motion-essential animate-spin rounded-full h-8 w-8 border-b-2 mx-auto"
            style={{ borderColor: 'var(--accent-ember)' }}
          />
        </div>
      )}

      {searchResults.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {searchResults.map((searchCard) => (
            <button
              type="button"
              key={searchCard.id}
              onClick={() => onSelectCard(searchCard)}
              className="glass-panel p-4 rounded-lg cursor-pointer text-left hover:scale-[1.02] focus:outline-none focus-visible:ring-2"
              style={{
                transition:
                  'transform var(--motion-duration-default) var(--motion-ease-out), box-shadow var(--motion-duration-default) var(--motion-ease-out)',
                '--tw-ring-color': 'var(--accent-ember)',
              }}
            >
              <div className="flex items-center gap-3">
                <div
                  className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0"
                  style={{ backgroundColor: 'var(--bg-tertiary)' }}
                >
                  {searchCard.image_url ? (
                    <img
                      src={searchCard.image_url}
                      alt={searchCard.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div
                      className="w-full h-full flex items-center justify-center text-xs"
                      style={{ color: 'var(--text-secondary)' }}
                    >
                      {searchCard.game}
                    </div>
                  )}
                </div>
                <div className="flex-1">
                  <h3
                    className="font-semibold"
                    style={{ color: 'var(--text-primary)' }}
                  >
                    {searchCard.name}
                  </h3>
                  <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                    {searchCard.set_name} • {searchCard.game}
                  </p>
                  <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                    {searchCard.rarity}
                  </p>
                </div>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}