const { useState, useEffect, useRef } = React;
/* ---------- Buttons / badges ---------- */
function Btn({ children, variant = "ghost", icon, small, onClick, type, disabled, style, className }) {
  return (
    <button type={type || "button"} disabled={disabled} onClick={onClick}
      className={"btn btn-" + variant + (small ? " btn-sm" : "") + (className ? " " + className : "")} style={style}>
      {icon ? <Icon name={icon} size={small ? 14 : 16} /> : null}
      {children}
    </button>
  );
}

const TONES = {
  Paid: "green", Active: "green", Occupied: "green", Approved: "green", "In stock": "green", Received: "green", Inbound: "green",
  Sent: "blue", Scheduled: "blue",
  Overdue: "red", "Out of stock": "red", Declined: "red", Outbound: "red",
  Low: "amber", Pending: "amber", Notice: "amber", Vacant: "amber", Due: "amber", "On leave": "amber", Adjustment: "amber",
  Transfer: "blue",
  Draft: "neutral"
};
// `children` stays the English status value: it is the key for both TONES and
// the translation table. Translating here means every <Badge> in the app is
// localised without touching the call sites.
function Badge({ tone, children }) {
  const t = tone || TONES[children] || "neutral";
  return <span className={"badge " + t}><i className="bdot"></i>{typeof children === "string" ? TV(children) : children}</span>;
}


Object.assign(window, { Btn, TONES, Badge });