"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { markAllNotificationsReadAction } from "@/lib/actions/notifications";

export function MarkAllReadButton() {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <button
      type="button"
      disabled={pending}
      onClick={() => startTransition(async () => {
        await markAllNotificationsReadAction();
        router.refresh();
      })}
      className="text-xs border border-white/30 rounded-lg px-3.5 py-1.5 hover:border-white disabled:opacity-50 transition-colors shrink-0"
    >
      Alle als gelesen markieren
    </button>
  );
}