import React from "react";
import "./FileUploadCard.css";

export default function FileUploadCard({
  files = [],
  onFilesChange,
  uploadProgress = {},
  uploading,
  onUpload,
}) {
  const handleSelect = (e) => {
    onFilesChange(Array.from(e.target.files));
  };

  return (
    <div className="upload-card">
      <h3>Upload Files</h3>
      <p className="sub">Images, PDFs, Docs, etc.</p>

      <div className="dropzone">
        <input type="file" multiple onChange={handleSelect} />
        <span>Drop files here or browse</span>
      </div>

      {files.map((file, i) => {
        const percent = uploadProgress[file.name] || 0;

        return (
          <div key={i} className="file-box">
            <div className="file-row">
              <strong>{file.name}</strong>
              <span className="percent">{percent}%</span>
            </div>

            <p>{(file.size / 1024 / 1024).toFixed(2)} MB</p>

            <div className="progress-bar">
              <div
                className="progress"
                style={{ width: `${percent}%` }}
              />
            </div>
          </div>
        );
      })}

      {files.length > 0 && (
        <button
          className="clear-btn"
          onClick={onUpload}
          disabled={uploading}
        >
          {uploading ? "Uploading..." : "Upload Files"}
        </button>
      )}
    </div>
  );
}