"use client";

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

export function DeleteEventButton({
  eventId,
  action,
  compact,
}: {
  eventId: string;
  action: (eventId: string) => Promise<void>;
  // Kompakt: nur ein "×", für enge Stellen wie eine Tageszelle im
  // Monatsraster — sonst der volle "Löschen"-Text.
  compact?: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <button
      type="button"
      disabled={pending}
      title="Termin löschen"
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        if (confirm("Diesen Termin wirklich löschen?")) {
          startTransition(async () => {
            await action(eventId);
            router.refresh();
          });
        }
      }}
      className={
        compact
          ? "leading-none text-red-400/70 hover:text-red-400 transition-colors disabled:opacity-50 shrink-0 px-1"
          : "text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50 shrink-0"
      }
    >
      {compact ? "×" : "Löschen"}
    </button>
  );
}