import { ThumbsDown, ThumbsUp } from "lucide-react";
import { castVoteAction } from "@/lib/actions/votes";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function VoteButtons({
  productId,
  upvotes,
  downvotes,
  myVote,
}: {
  productId: string;
  upvotes: number;
  downvotes: number;
  myVote: 1 | -1 | null;
}) {
  const upAction = castVoteAction.bind(null, productId, 1);
  const downAction = castVoteAction.bind(null, productId, -1);

  return (
    <div className="flex items-center gap-2">
      <form action={upAction}>
        <Button
          type="submit"
          variant={myVote === 1 ? "default" : "outline"}
          className={cn(
            "gap-1.5",
            myVote === 1 && "bg-emerald-600 text-white hover:bg-emerald-700",
          )}
        >
          <ThumbsUp className="h-4 w-4" /> {upvotes}
        </Button>
      </form>
      <form action={downAction}>
        <Button
          type="submit"
          variant={myVote === -1 ? "default" : "outline"}
          className={cn(
            "gap-1.5",
            myVote === -1 && "bg-red-600 text-white hover:bg-red-700",
          )}
        >
          <ThumbsDown className="h-4 w-4" /> {downvotes}
        </Button>
      </form>
    </div>
  );
}