"use client";

import { useFormStatus } from "react-dom";
import { Trash2 } from "lucide-react";

/**
 * Submit button for the remove-from-watchlist form.
 *
 * Split out purely so `useFormStatus` has a form to read from — it only works
 * inside one. The surrounding `<form action={serverAction}>` posts without any
 * of this JS, so removal still works if the bundle fails to load; this just
 * adds the disabled/pending affordance on top.
 */
export default function RemoveButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="rounded-lg p-2 text-gray-400 hover:bg-red-50 hover:text-[#CC1414] disabled:opacity-50"
      aria-label="Remove from watchlist"
    >
      <Trash2 className={`h-4 w-4 ${pending ? "animate-pulse" : ""}`} />
    </button>
  );
}