/* eslint-disable */
// Sidebar navigation

function Sidebar({ active, onNav }) {
  const main = [
    { id: "campaigns", label: "行銷活動", en: "Campaigns", icon: I.MessageSquare, badge: "12" },
    { id: "templates", label: "訊息範本", en: "Templates", icon: I.Layers },
    { id: "recipients", label: "收件人名單", en: "Recipients", icon: I.Users },
    { id: "schedule", label: "排程中心", en: "Schedule", icon: I.Calendar },
    { id: "ab", label: "A/B 測試", en: "A/B Tests", icon: I.Split },
    { id: "stats", label: "成效分析", en: "Analytics", icon: I.BarChart },
  ];
  const lib = [
    { id: "media", label: "媒體素材庫", en: "Media library", icon: I.Image },
    { id: "settings", label: "帳號與品牌", en: "Brand & settings", icon: I.Settings },
  ];
  const Item = ({ it }) => (
    <button className={"sb-item" + (active === it.id ? " active" : "")} onClick={() => onNav && onNav(it.id)}>
      <it.icon size={15} />
      <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
        {it.label}
      </span>
      {it.badge && <span className="badge">{it.badge}</span>}
    </button>
  );
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="logo-mark">R</div>
        <div>
          <div className="sb-brand-name">RCS Studio</div>
          <div className="sb-brand-sub">行銷訊息工作台</div>
        </div>
      </div>
      <div className="sb-section">建立 · CREATE</div>
      {main.slice(0, 3).map((it) => <Item key={it.id} it={it} />)}
      <div className="sb-section">營運 · OPERATE</div>
      {main.slice(3).map((it) => <Item key={it.id} it={it} />)}
      <div className="sb-section">資源 · LIBRARY</div>
      {lib.map((it) => <Item key={it.id} it={it} />)}
      <div className="sb-foot">
        <h6>本月配額</h6>
        <p>已使用 23,481 / 50,000 則 RCS 訊息</p>
        <div style={{ height: 6, background: "#fff", borderRadius: 999, overflow: "hidden", marginBottom: 10 }}>
          <div style={{ width: "47%", height: "100%", background: "var(--rh-primary)" }} />
        </div>
        <button>升級方案 →</button>
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;