import { For } from 'solid-js';
import type { DeckStore } from './hooks/deckStore';

export interface DeckHeaderProps {
  store: DeckStore;
}

/**
 * 卡牌预览头部：编辑按钮和 Tab 选择器
 */
export function DeckHeader(props: DeckHeaderProps) {
  const { store } = props;

  return (
    <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
      {/* 编辑按钮 */}
      <button
        onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
        class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
          store.state.isEditing && !store.state.fixed
            ? 'bg-blue-100 text-blue-600'
            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
        }`}
      >
        {store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
      </button>

        {/* 导出 PDF 按钮 */}
        <button
            onClick={() => store.actions.exportDeck()}
            class="px-2 py-1 rounded text-xs font-medium transition-colors cursor-pointer bg-green-100 text-green-600 hover:bg-green-200"
        >
            📥 导出 PDF
        </button>

      {/* Tab 选择器 */}
      <div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
        <For each={store.state.cards}>
          {(card, index) => (
            <button
              onClick={() => store.actions.setActiveTab(index())}
              class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
                store.state.activeTab === index()
                  ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
                  : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
              }`}
            >
              {card.label || card.name || `Card ${index() + 1}`}
            </button>
          )}
        </For>
      </div>
    </div>
  );
}