import { isDismissable } from "@/domain/notifications/utils/visible-notification-sections";
import type { NotificationCenter } from "./use-notification-center";

type NotificationFeedActionsProps = {
  center: NotificationCenter;
};

export function NotificationFeedActions({ center }: NotificationFeedActionsProps) {
  const hasUnread = center.unreadIds.size > 0;
  // Rows that need acknowledging are never cleared, so they alone do not enable "Clear all".
  const hasItems = center.sections.some((section) => section.items.some(isDismissable));

  return (
    <>
      <button
        type="button"
        onClick={center.markAllRead}
        disabled={!hasUnread}
        className="cursor-pointer transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
        style={{ fontSize: 12, fontWeight: 500, color: "var(--color-primary)" }}
      >
        Mark all read
      </button>
      <button
        type="button"
        onClick={center.dismissAll}
        disabled={!hasItems}
        className="cursor-pointer transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
        style={{ fontSize: 12, fontWeight: 500, color: "var(--color-text-muted)" }}
      >
        Clear all
      </button>
    </>
  );
}