Epicure/apps/web/components/collections/collection-star-button.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Star } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function CollectionStarButton({
  collectionId,
  initialStarred = false,
  starCount,
}: {
  collectionId: string;
  initialStarred?: boolean;
  starCount: number;
}) {
  const tCommon = useTranslations("common");
  const [starred, setStarred] = useState(initialStarred);
  const [count, setCount] = useState(starCount);
  const [loading, setLoading] = useState(false);

  async function toggle(e: React.MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    const next = !starred;
    setStarred(next);
    setCount((c) => (next ? c + 1 : c - 1));
    setLoading(true);
    try {
      const res = await fetch(`/api/v1/collections/${collectionId}/favorite`, {
        method: next ? "POST" : "DELETE",
      });
      if (!res.ok) throw new Error();
    } catch {
      setStarred(!next);
      setCount((c) => (next ? c - 1 : c + 1));
      toast.error(tCommon("updateFailed"));
    } finally {
      setLoading(false);
    }
  }

  return (
    <Button variant="ghost" size="sm" onClick={toggle} disabled={loading} className="gap-1.5 px-2">
      <Star className={cn("h-4 w-4", starred && "fill-yellow-400 text-yellow-400")} />
      <span className="text-xs tabular-nums">{count}</span>
    </Button>
  );
}