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

export interface DeckContentProps {
  store: DeckStore;
  isLoading: boolean;
}

/**
 * 卡牌预览内容区域：错误/加载/卡牌预览/空状态
 */
export function DeckContent(props: DeckContentProps) {
  return (
    <>
      {/* 错误提示 */}
      <Show when={props.store.state.error}>
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
          {props.store.state.error}
        </div>
      </Show>

      {/* 加载状态 */}
      <Show when={props.isLoading}>
        <div class="text-center text-gray-500 py-8">
          加载卡牌数据中...
        </div>
      </Show>

      {/* 卡牌预览 */}
      <Show when={!props.isLoading && props.store.state.cards.length > 0 && !props.store.state.error}>
        <CardPreview store={props.store} />
      </Show>

      {/* 空状态 */}
      <Show when={!props.isLoading && props.store.state.cards.length === 0 && !props.store.state.error}>
        <div class="text-center text-gray-500 py-8">
          暂无卡牌数据
        </div>
      </Show>
    </>
  );
}