"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

interface DeleteImageButtonProps {
  imageId: string;
}

export default function DeleteImageButton({ imageId }: DeleteImageButtonProps) {
  const [deleting, setDeleting] = useState(false);
  const router = useRouter();

  const handleDelete = async () => {
    setDeleting(true);
    try {
      const res = await fetch(`/api/user/monument/image/${imageId}`, { method: "DELETE" });
      if (res.ok) {
        router.refresh();
      } else {
        const data = await res.json();
        alert(data.error || "Failed to delete image");
      }
    } catch {
      alert("Something went wrong");
    } finally {
      setDeleting(false);
    }
  };

  return (
    <button
      onClick={handleDelete}
      disabled={deleting}
      className="absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100 disabled:opacity-50"
      title="Delete image"
    >
      &times;
    </button>
  );
}