"use client";

import { useState } from "react";
import { Star } from "lucide-react";
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 [starred, setStarred] = useState(initialStarred);
  const [count, setCount] = useState(starCount);
  const [loading, setLoading] = useState(false);

  async function toggle(e: React.MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    setLoading(true);
    try {
      const res = await fetch(`/api/v1/collections/${collectionId}/favorite`, {
        method: starred ? "DELETE" : "POST",
      });
      if (!res.ok) return;
      setStarred(!starred);
      setCount((c) => (starred ? c - 1 : c + 1));
    } 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>
  );
}