/* eslint-disable */
// Editor helpers — small reusable controls

function SectionHead({ icon: Icon, title, sub, meta, eyebrow }) {
  return (
    <div className="section-head">
      <div className="head-icon"><Icon size={15} /></div>
      <div>
        <h5>{title}</h5>
        {sub && <p>{sub}</p>}
      </div>
      {meta && <div className="meta">{meta}</div>}
    </div>
  );
}

function Field({ label, hint, help, children }) {
  return (
    <div className="field">
      {label && (
        <label>
          <span>{label}</span>
          {hint && <span className="hint">{hint}</span>}
        </label>
      )}
      {children}
      {help && <div className="help">{help}</div>}
    </div>
  );
}

function Switch({ on, onChange }) {
  return <button className={"switch" + (on ? " on" : "")} onClick={() => onChange(!on)} />;
}

function ToggleRow({ title, desc, on, onChange, children }) {
  return (
    <div className="toggle-row">
      <div className="body">
        <h6>{title}</h6>
        {desc && <p>{desc}</p>}
      </div>
      {children}
      <Switch on={on} onChange={onChange} />
    </div>
  );
}

function VarChips({ onInsert }) {
  const vars = [
    { k: "name", label: "{{收件人姓名}}" },
    { k: "code", label: "{{優惠碼}}" },
    { k: "city", label: "{{城市}}" },
  ];
  return (
    <div className="var-chips">
      {vars.map((v) => (
        <button key={v.k} className="var-chip" onClick={() => onInsert(`{{${v.k}}}`)}>
          {v.label}
        </button>
      ))}
    </div>
  );
}

function Counter({ value, max }) {
  const len = (value || "").length;
  const cls = len > max ? "over" : len > max * 0.85 ? "warn" : "";
  return <div className={"counter " + cls}>{len} / {max} 字</div>;
}

window.SectionHead = SectionHead;
window.Field = Field;
window.Switch = Switch;
window.ToggleRow = ToggleRow;
window.VarChips = VarChips;
window.Counter = Counter;