import { Link } from '#/components/atoms/link.jsx';
import { cn } from '#/lib/utils.js';

/** A pill that toggles one filter; carries its own count so it reads as a legend row too. */
export function Chip({ href, onNavigate, active, title, children }) {
  return (
    <Link
      href={href}
      onNavigate={onNavigate}
      title={title}
      className={cn(
        'inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-3 py-1 font-semibold text-[12px] transition-colors',
        active
          ? 'border-key/40 bg-key/10 text-key'
          : 'border-border text-muted-foreground hover:border-ring hover:text-foreground',
      )}
    >
      {children}
    </Link>
  );
}