import type { ReactNode } from "react";

export type StatusTone =
  | "neutral"
  | "success"
  | "info"
  | "warning"
  | "danger"
  | "gold"
  | "epic";

interface StatusPillProps {
  children: ReactNode;
  icon?: string;
  tone?: StatusTone;
}

export default function StatusPill({ children, icon, tone = "neutral" }: StatusPillProps) {
  return (
    <span className="status-pill" data-tone={tone}>
      {icon ? <span aria-hidden="true">{icon}</span> : null}
      {children}
    </span>
  );
}