"use client"; import { useState } from "react"; import { useTranslations } from "next-intl"; import { Bell, BellOff, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { toast } from "sonner"; import { analyticsCategory } from "@/lib/analytics"; interface SubscribeButtonProps { categoryId: string; categoryName: string; initialSubscribed: boolean; iconOnly?: boolean; pill?: boolean; } export function SubscribeButton({ categoryId, categoryName, initialSubscribed, iconOnly = false, pill = false }: SubscribeButtonProps) { const t = useTranslations("subscription"); const tCommon = useTranslations("common"); const [isSubscribed, setIsSubscribed] = useState(initialSubscribed); const [isLoading, setIsLoading] = useState(false); const handleToggle = async () => { setIsLoading(true); try { const method = isSubscribed ? "DELETE" : "POST"; const response = await fetch(`/api/categories/${categoryId}/subscribe`, { method, }); if (!response.ok) { throw new Error("Failed to update subscription"); } setIsSubscribed(!isSubscribed); if (isSubscribed) { analyticsCategory.unsubscribe(categoryId, categoryName); } else { analyticsCategory.subscribe(categoryId, categoryName); } toast.success( isSubscribed ? t("unsubscribedFrom", { name: categoryName }) : t("subscribedTo", { name: categoryName }) ); } catch { toast.error(tCommon("error")); } finally { setIsLoading(false); } }; if (iconOnly) { return ( ); } if (pill) { return ( ); } return ( ); }