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

export interface DataEditorPanelProps {
  activeTab: number;
  cards: DeckStore['state']['cards'];
  updateCardData: DeckStore['actions']['updateCardData'];
}

/**
 * 左侧：CSV 数据编辑面板
 */
export function DataEditorPanel(props: DataEditorPanelProps) {
  return (
    <div class="w-64 flex-shrink-0">
      <h3 class="font-bold mb-2">卡牌数据</h3>
      <div class="space-y-2 max-h-96 overflow-y-auto">
        <For each={Object.keys(props.cards[props.activeTab] || {})}>
          {(key) => (
            <div>
              <label class="block text-sm font-medium text-gray-700">{key}</label>
              <textarea
                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                rows={3}
                value={props.cards[props.activeTab]?.[key] || ''}
                onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
              />
            </div>
          )}
        </For>
      </div>
    </div>
  );
}