"use client";

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

export function MarkAllReadButton({ label }: { label: string }) {
  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-full px-3.5 py-1.5 hover:border-white disabled:opacity-50 transition-colors shrink-0"
    >
      {label}
    </button>
  );
}