Vote button

"use client";

import * as React from "react";
import { ChevronUpIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const numberFormat = new Intl.NumberFormat("en-US");

type VoteButtonProps = Omit<
  React.ComponentProps<typeof Button>,
  "onClick" | "children" | "variant" | "size" | "asChild"
> & {
  /** Votes before the viewer's own. One is added while the button is pressed. */
  count: number;
  /** Controlled pressed state. */
  pressed?: boolean;
  /** Pressed state on first render when uncontrolled. */
  defaultPressed?: boolean;
  /** Called with the next pressed state on every toggle. */
  onPressedChange?: (pressed: boolean) => void;
  /** Chevron beside the count, or above it for a feed. */
  orientation?: "horizontal" | "vertical";
  /** Control height: 28px or 32px. Vertical grows to fit. */
  size?: "sm" | "default";
  /** Accessible name. Defaults to "Upvote". */
  label?: string;
};

/**
 * An upvote toggle with its count in one outline pill.
 * Pressed turns solid and adds one to the count locally; wire onPressedChange to persist it.
 */
export function VoteButton({
  count,
  pressed,
  defaultPressed = false,
  onPressedChange,
  orientation = "horizontal",
  size = "default",
  label = "Upvote",
  className,
  ...props
}: VoteButtonProps) {
  const [internal, setInternal] = React.useState(defaultPressed);
  const isPressed = pressed ?? internal;
  const shown = count + (isPressed ? 1 : 0);

  const toggle = () => {
    const next = !isPressed;
    if (pressed === undefined) setInternal(next);
    onPressedChange?.(next);
  };

  return (
    <Button
      type="button"
      variant={isPressed ? "default" : "outline"}
      size={size}
      aria-pressed={isPressed}
      onClick={toggle}
      className={cn(
        "rounded-full transition-colors duration-100 ease-out",
        orientation === "vertical" && "h-auto min-w-9 flex-col gap-0 px-2 py-1",
        orientation === "vertical" && size === "sm" && "min-w-8 px-1.5 py-0.5",
        className,
      )}
      {...props}
    >
      <ChevronUpIcon aria-hidden="true" className={size === "sm" ? "size-3.5" : "size-4"} />
      <span className="sr-only">{label}</span>
      <span className="font-mono text-xs tabular-nums" aria-live="polite">
        {numberFormat.format(shown)}
      </span>
    </Button>
  );
}