import React, { ReactNode } from 'react';

import { toneToBadgeClass, VisibilityTone } from './helpers';

interface PillProps {
  /** Canonical tone; maps to a coloured background + border. */
  tone?: VisibilityTone;
  /** Extra classes applied on top of the tone styling. */
  className?: string;
  /** Visual size - ``sm`` is the compact inline variant. */
  size?: 'sm' | 'md';
  /** Native tooltip shown on hover (e.g. a provenance reference). */
  title?: string;
  children: ReactNode;
}

/**
 * Lightweight rounded badge used throughout the AI Visibility pages. Wraps
 * the canonical tone → Tailwind mapping defined in {@link toneToBadgeClass}
 * so every panel colours the same verdict the same way.
 *
 * @param {PillProps} props - Tone, size, optional tooltip and body.
 * @returns {JSX.Element} The badge.
 */
const Pill = ({
  tone,
  className = '',
  size = 'md',
  title,
  children,
}: PillProps): JSX.Element => {
  const sizeClass =
    size === 'sm' ? 'px-2 py-0.5 text-[11px]' : 'px-2.5 py-0.5 text-xs';

  return (
    <span
      title={title}
      className={`inline-flex items-center gap-1 rounded-full font-medium ${sizeClass} ${toneToBadgeClass(
        tone
      )} ${className}`.trim()}
    >
      {children}
    </span>
  );
};

export default Pill;