import React from "react";

const CLOUD_NAME = "dh5qgexjo";
const UPLOAD_PRESET = "preset_articles"; // crée-le dans Cloudinary si ce n’est pas encore fait
const FOLDER = "articles-octopus";

const ImageUploaderCloudinary = ({ onUploadSuccess }) => {
  const handleUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", UPLOAD_PRESET);
    formData.append("folder", FOLDER);

    const res = await fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, {
      method: "POST",
      body: formData,
    });

    const data = await res.json();

    if (data.secure_url) {
      const transformedUrl = data.secure_url.replace("/upload/", "/upload/f_webp,w_800/");
      onUploadSuccess(transformedUrl); // ← Ici on t'envoie l’URL optimisée
    } else {
      alert("❌ Erreur lors de l'upload");
    }
  };

  return <input type="file" accept="image/*" onChange={handleUpload} />;
};

export default ImageUploaderCloudinary;