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

export interface PrintPreviewFooterProps {
  store: DeckStore;
}

export function PrintPreviewFooter(props: PrintPreviewFooterProps) {
  const { store } = props;

  return (
    <Show when={store.state.exportProgress > 0 || store.state.exportError}>
      <div class="fixed bottom-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mb-4 px-4 py-3">
        <Show when={!store.state.exportError}>
          <div class="flex items-center gap-4">
            <span class="text-sm text-gray-600">导出进度：</span>
            <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div
                class="h-full bg-blue-600 transition-all duration-200"
                style={{ width: `${store.state.exportProgress}%` }}
              />
            </div>
            <span class="text-sm font-medium text-gray-700">{store.state.exportProgress}%</span>
          </div>
        </Show>
        <Show when={store.state.exportError}>
          <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-2 text-red-600">
              <span>❌</span>
              <span class="text-sm font-medium">{store.state.exportError}</span>
            </div>
            <button
              onClick={() => store.actions.clearExportError()}
              class="text-gray-500 hover:text-gray-700 cursor-pointer"
            >
              ✕
            </button>
          </div>
        </Show>
      </div>
    </Show>
  );
}