import React from "react";

export default function UploadModal({ isOpen, onClose, onFileSelect, onUpload }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-container">
        <div className="modal-header">
          <h3>Upload Document</h3>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>

        <div className="modal-body">
          <div className="upload-box">
            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5 1.75V22.75M17.5 1.75L26.25 10.5M17.5 1.75L8.75 10.5M33.25 22.75V29.75C33.25 30.6783 32.8812 31.5685 32.2249 32.2249C31.5685 32.8812 30.6783 33.25 29.75 33.25H5.25C4.32174 33.25 3.4315 32.8812 2.77513 32.2249C2.11875 31.5685 1.75 30.6783 1.75 29.75V22.75" stroke="#0C3155" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <h3 className="mt-3">Upload Case Documents</h3>
            <p>Upload legal documents, contracts, evidence, or any relevant files</p>

            <label className="browse-btn">
              Browse Files
              <input
                type="file"
                multiple
                onChange={onFileSelect}
                style={{ display: "none" }}
              />
            </label>

            <p className="supported-text">
              Supported formats: PDF, DOC, DOCX, TXT, JPG, JEPG, PNG
            </p>
          </div>
        </div>

        <div className="modal-footer">
          <button className="cancel-btn" onClick={onClose}>Cancel</button>
          <button className="upload-btn" style={{background: "#0C3155", color: "white"}} onClick={onUpload}>Upload</button>
        </div>
      </div>
    </div>
  );
}

