"use client";

import { cn } from "@/lib/utils";

export function StatChip({
  label,
  value,
  dot,
  active,
  onClick,
}: {
  label: string;
  value: number;
  dot?: string | null;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex items-center gap-1.5 whitespace-nowrap rounded-md border bg-background px-2.5 py-1.5 transition-colors hover:bg-accent",
        active && "border-foreground/40 ring-1 ring-foreground/20",
      )}
    >
      <span className="text-base font-semibold tabular-nums">{value}</span>
      {dot && <span className={cn("size-1.5 rounded-full", dot)} />}
      <span className="text-xs capitalize text-muted-foreground">{label}</span>
    </button>
  );
}