import type { NotificationCenter } from "./use-notification-center";

type NotificationFeedActionsProps = {
  center: NotificationCenter;
};

export function NotificationFeedActions({ center }: NotificationFeedActionsProps) {
  const hasUnread = center.unreadIds.size > 0;
  const hasItems = center.sections.length > 0;

  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>
    </>
  );
}