import React from "react";
import { Button } from "../ui/button";
import { Trash } from "lucide-react";
import { api } from "@/trpc/react";
import { toast } from "sonner";
import { DELETE_COMMENT_EVENT } from "@/server/socket/event-const";
import { useSocket } from "../socket-context";

function CommentDeleteButton({ commentId }: { commentId: string }) {
  const { socket } = useSocket();
  const [loading, setLoading] = React.useState(false);
  const { mutate } = api.comment.delete.useMutation({
    onSuccess: (comment) => {
      setLoading(false);
      socket?.emit(DELETE_COMMENT_EVENT, comment?.id, comment?.articleId);

      toast.success("Kommentar gelöscht.");
    },
    onError: () => {
      setLoading(false);
      toast.error("Etwas ist schief gelaufen.");
    },
  });
  const handleClick = () => {
    setLoading(true);
    mutate({ commentId });
  };
  return (
    <Button
      disabled={loading}
      onClick={handleClick}
      size={"tiny"}
      className="bg-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground"
    >
      <Trash className="size-4" />
    </Button>
  );
}

export default CommentDeleteButton;
