'use client'

import type { ButtonHTMLAttributes, ReactNode } from 'react'

/**
 * Design-system filter pill (`.pill` / `.pill.act`): bordered card-surface
 * chip that fills with the accent color when active. Used for status / role /
 * category filter rows above list views.
 */
export interface FilterPillProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
  active?: boolean
  /** Optional trailing count rendered in tabular numerals. */
  count?: number
  children: ReactNode
}

export function FilterPill({
  active = false,
  count,
  className,
  children,
  ...rest
}: FilterPillProps) {
  return (
    <button
      type="button"
      aria-pressed={active}
      className={`inline-flex items-center gap-1.5 rounded-[7px] border px-3 py-1.5 text-[12.5px] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
        active
          ? 'border-[var(--acc)] bg-[var(--acc)] text-white'
          : 'border-[var(--bdr)] bg-[var(--card)] text-[var(--sub)] hover:border-[var(--acc-m)] hover:text-[var(--acc)]'
      } ${className ?? ''}`}
      {...rest}
    >
      {children}
      {count !== undefined && (
        <span className={`tabular-nums ${active ? 'text-white/80' : 'text-[var(--muted)]'}`}>
          {count}
        </span>
      )}
    </button>
  )
}
