gitfor/platform

import { useThreadSubscription } from "~/hooks/use-thread-subscription";
import { useViewer } from "~/hooks/use-viewer";
import { Button } from "./ui/Button";

const REASONS: Record<string, string> = {
  manual: "You chose this setting for this thread.",
  participating: "You're receiving notifications because you're participating.",
  watching: "You're receiving notifications because you're watching this repository.",
  none: "You're not receiving notifications from this thread.",
};

export function ThreadSubscription({ owner, repo, number }: { owner: string; repo: string; number: number }) {
  const viewer = useViewer();
  const subscription = useThreadSubscription({ owner, repo, number });
  if (!viewer || !subscription.state) return null;
  const { subscribed, reason } = subscription.state;

  return (
    <section className="space-y-2 border-b border-gray-800 pb-4">
      <h3 className="label-caps text-gray-500">Notifications</h3>
      <Button size="sm" className="w-full" pending={subscription.pending} onClick={subscription.toggle}>
        {subscribed ? "Unsubscribe" : "Subscribe"}
      </Button>
      <p className="text-xs text-gray-500">{subscription.error ?? REASONS[reason] ?? REASONS.none}</p>
    </section>
  );
}