"use client";

import { Heart } from "lucide-react";
import { useAddFollow, useIsFollowing, useRemoveFollow } from "@/lib/hooks/useFollows";
import { cn } from "@/lib/utils";

interface FollowButtonProps {
  type: "bill" | "member" | "topic";
  value: string;
  label?: string;
}

export function FollowButton({ type, value, label }: FollowButtonProps) {
  const existing = useIsFollowing(type, value);
  const add = useAddFollow();
  const remove = useRemoveFollow();

  const isFollowing = !!existing;
  const isPending = add.isPending || remove.isPending;

  const handleClick = () => {
    if (isFollowing && existing) {
      remove.mutate(existing.id);
    } else {
      add.mutate({ type, value });
    }
  };

  return (
    <button
      onClick={handleClick}
      disabled={isPending}
      className={cn(
        "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
        isFollowing
          ? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
          : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
      )}
    >
      <Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
      {isFollowing ? "Unfollow" : label || "Follow"}
    </button>
  );
}