import type { HTMLAttributes, ReactNode } from 'react'

/**
 * Design-system stat pill (`.stat-pill`): a compact card-surface chip with a
 * bold count and a muted label, used in page headers to summarize list
 * contents (e.g. "12 Total · 8 Active · 4 Inactive").
 */
export interface StatPillProps extends HTMLAttributes<HTMLSpanElement> {
  /** The count/value, rendered bold in `--txt` (override color via valueClassName). */
  value: ReactNode
  /** Muted label shown after the value. */
  label: ReactNode
  /** Optional leading icon. */
  icon?: ReactNode
  /** Extra classes for the value (e.g. `text-[var(--suc)]` for an Active count). */
  valueClassName?: string
}

export function StatPill({
  value,
  label,
  icon,
  valueClassName,
  className,
  ...rest
}: StatPillProps) {
  return (
    <span
      className={`inline-flex items-center gap-[5px] rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1 text-[length:var(--fs-sub)] text-[var(--sub)] ${className ?? ''}`}
      {...rest}
    >
      {icon}
      <b className={`font-semibold text-[var(--txt)] ${valueClassName ?? ''}`}>{value}</b>
      {label}
    </span>
  )
}
