import React, { useState } from "react";
import Watermark from "@be-tech/watermarkjs";

function WatermarkExample() {
  const [image, setImage] = useState(null);
  const [watermarkedImage, setWatermarkedImage] = useState(null);

  const handleFileInputChange = (event) => {
    const file = event.target.files[0];
    setImage(file);
  };

  const handleWatermarkClick = async () => {
    try {

      // pass the image to apply watermark
      const watermark = Watermark.load(image);

      await watermark.applyText({
        text: "Watermark Text",
        position: "bottom-center",
        style: {
          size: "48px",
          family: "Arial",
          color: "white",
        },
      });

      // get the image with all watermark added
      const watermarked = watermark.result;

      setWatermarkedImage(watermarked);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileInputChange} />
      <button onClick={handleWatermarkClick}>Add Watermark</button>
      {watermarkedImage && (
        <img src={watermarkedImage.previewUrl} alt="Watermarked Image" />
      )}
    </div>
  );
}

export default WatermarkExample;