const styles = {
  blue: 'border-cyan-400/25 bg-cyan-400/10 text-cyan-300',
  green: 'border-emerald-400/25 bg-emerald-400/10 text-emerald-300',
  amber: 'border-amber-400/25 bg-amber-400/10 text-amber-300'
};
const StatusPill = ({ children, tone = 'blue' }) => (
  <span className={`inline-flex rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider ${styles[tone]}`}>
    {children}
  </span>
);
export default StatusPill;