// react
import { useState } from "react";
import { useInkify } from "tango-watermark";
import { Space } from "tango-ui-cw";
import imageUrl from "@/asstes/yourimage.jpg";

const Demo = () => {
  const [finalUrl, setFinalUrl] = useState();

  const watermarkConfig = {
    text: "Tango UI",
    fontSize: 100,
    color: "white",
    rotate: -40,
    spacing: 250,
    lineHeight: 60,
    opacity: 0.7,
  };

  useInkify(imageUrl, watermarkConfig)
    .then((dataUrl) => {
      setFinalUrl(dataUrl);
    })
    .catch((error) => {
      console.error("error:", error);
    });

  return (
    <Space className="flex flex-col items-center gap-5 p-5 font-sans">
      <Space className="text-xl font-bold mb-3">Demo</Space>
      <Space className="flex gap-10 justify-center">
        <Space className="text-center">
          <h3 className="my-2 text-gray-600">Before</h3>
          <img
            src={imageUrl}
            alt="original"
            className="w-[500px] border border-gray-200 rounded-lg shadow-md"
          />
        </Space>
        <Space className="text-center">
          <h3 className="my-2 text-gray-600">After</h3>
          <img
            src={finalUrl}
            alt="with-watermark"
            className="w-[500px] border border-gray-200 rounded-lg shadow-md"
          />
        </Space>
      </Space>
    </Space>
  );
};

export default Demo;