import type { HTMLAttributes, ReactNode } from "react";

export type CountBadgeProps = HTMLAttributes<HTMLSpanElement> & {
  children: ReactNode;
  tone?: "accent" | "neutral" | "danger";
  size?: "compact" | "default";
};

export default function CountBadge({
  children,
  tone = "accent",
  size = "default",
  className = "",
  ...props
}: CountBadgeProps) {
  return (
    <span
      {...props}
      className={[
        "count-badge",
        `count-badge-${tone}`,
        `count-badge-${size}`,
        className
      ].filter(Boolean).join(" ")}
    >
      {children}
    </span>
  );
}