chrysopedia/frontend/src/components/StatusBadge.tsx

/**
 * Reusable status badge with color coding.
 *
 * Maps review_status values to colored pill shapes:
 *   pending → amber, approved → green, edited → blue, rejected → red
 */

interface StatusBadgeProps {
  status: string;
}

export default function StatusBadge({ status }: StatusBadgeProps) {
  const normalized = status.toLowerCase();
  return (
    <span className={`badge badge--${normalized}`}>
      {normalized}
    </span>
  );
}