import type { ReactNode, CSSProperties } from 'react';

type Tone = 'ok' | 'warn' | 'danger' | 'info' | 'ghost' | 'outline';

interface PillProps {
  tone?: Tone;
  children: ReactNode;
  style?: CSSProperties;
}

const TONE_STYLES: Record<Tone, string> = {
  ok: 'bg-[var(--ok-soft)] text-[var(--ok)]',
  warn: 'bg-[var(--warn-soft)] text-[var(--warn)]',
  danger: 'bg-[var(--danger-soft)] text-[var(--danger)]',
  info: 'bg-[var(--info-soft)] text-[var(--info)]',
  ghost: 'bg-[var(--bg-inset)] text-[var(--ink-muted)]',
  outline: 'bg-transparent text-[var(--ink-muted)] border border-[var(--border)]',
};

export function Pill({ tone = 'ghost', children, style }: PillProps) {
  return (
    <span
      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium leading-relaxed ${TONE_STYLES[tone]}`}
      style={style}
    >
      {children}
    </span>
  );
}
