import type { ReactNode } from 'react';

type TagProps = {

  children: ReactNode;

  tone?: 'neutral' | 'brand';

};

export function Tag({ children, tone = 'neutral' }: TagProps) {

  const styles = tone === 'brand'

    ? 'bg-surface-brand text-text-brand border-border-brand'

    : 'bg-surface-secondary text-text-secondary border-border-subtle';

  const base = 'inline-flex items-center rounded-md border px-2 text-xs';

  return <span className={`${base} ${styles}`}>{children}</span>;

}