import { useState } from "react";
import classNames from "classnames";

const downloadFile = (filename: string, content: string) => {
  const blob = new Blob([content], { type: "text/html" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
};

function DeployButton({
  html,
  error: _error, // ✅ Renamed to "_error" to avoid unused warning
}: {
  html: string;
  error?: boolean;
}) {

  const [loading, setLoading] = useState(false);

  const handleDownload = () => {
    setLoading(true);
    setTimeout(() => {
      downloadFile("index.html", html);
      setLoading(false);
    }, 300);
  };

  return (
    <div className="relative flex items-center justify-end">
      <button
        className={classNames(
          "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-2 px-6 hover:bg-pink-400 text-white bg-pink-500 shadow-sm dark:shadow-highlight/20 transition-all duration-100",
          {
            "opacity-50 cursor-not-allowed": loading,
          }
        )}
        onClick={handleDownload}
        disabled={loading}
      >
        {loading ? "Preparing..." : "Download Project"}
      </button>
    </div>
  );
}

export default DeployButton;