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

interface FileLoaderProps {
  pdf: PdfFile | null;
  onFileLoaded: (file: File) => void;
}

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

  return (
    <div className="card">
      <h2>1. Load PDF</h2>
      <p>Select a PDF file. Processing happens entirely in your browser.</p>
      <input type="file" accept="application/pdf" 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;