import React from 'react';
import type { PdfFile } from '../pdf/pdfTypes';

interface FileLoaderProps {
  pdf: PdfFile | null;
  onFilesLoaded: (files: File[]) => void;
}

const FileLoader: React.FC<FileLoaderProps> = ({ pdf, onFilesLoaded }) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files ?? []);
    if (files.length > 0) {
      onFilesLoaded(files);
      e.target.value = '';
    }
  };

  return (
    <div className="card">
      <h2>1. Load PDF</h2>
      <p>
        Select one PDF to open it directly, or select several PDFs to place them
        in the merge queue. Processing happens entirely in your browser.
      </p>
      <input
        type="file"
        accept="application/pdf"
        multiple
        onChange={handleChange}
      />

      {pdf && (
        <div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
          <div>
            <strong>Loaded:</strong> {pdf.name}
          </div>
          <div>
            <strong>Pages:</strong> {pdf.pageCount}
          </div>
        </div>
      )}
    </div>
  );
};

export default FileLoader;