import React, { useEffect, useRef } from "react";

// Make sure HSFileUpload is imported or available globally
// import HSFileUpload from '@your-package-name';

const ImageUploader = () => {
  const uploaderRef = useRef(null);

  useEffect(() => {
    if (uploaderRef.current && window.HSFileUpload) {
      new window.HSFileUpload(uploaderRef.current).init();
    }
  }, []);

  return (
    <div
      ref={uploaderRef}
      data-hs-file-upload={JSON.stringify({
        url: "/upload",
        acceptedFiles: "image/*",
        maxFiles: 1,
        singleton: true
      })}
    >
      <template data-hs-file-upload-preview=""></template>
      <div className="flex flex-wrap items-center gap-3 sm:gap-5">
        <div
          className="group"
          data-hs-file-upload-previews=""
          data-hs-file-upload-pseudo-trigger=""
        >
          <span className="group-has-[div]:hidden flex shrink-0 justify-center items-center size-20 border-2 border-dotted border-gray-300 text-gray-400 cursor-pointer rounded-full hover:bg-gray-50 ">
            <svg
              className="shrink-0 size-7"
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx={12} cy={12} r={10} />
              <circle cx={12} cy={10} r={3} />
              <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
            </svg>
          </span>
        </div>
        <div className="grow">
          <div className="flex items-center gap-x-2">
            <button
              type="button"
              className="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
              data-hs-file-upload-trigger=""
            >
              <svg
                className="shrink-0 size-4"
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="17 8 12 3 7 8" />
                <line x1={12} x2={12} y1={3} y2={15} />
              </svg>
              Upload photo
            </button>
            <button
              type="button"
              className="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg border border-gray-200 bg-white text-gray-500 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none "
              data-hs-file-upload-clear=""
            >
              Delete
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ImageUploader;