// CardByte Enterprise — top bar (workspace, search, notifications, avatar).
const React = window.React;
const Icon = window.CBIcon;

function Topbar({ workspace = "cardbyteai", onSearch }) {
  const { Avatar } = window.CardByteDesignSystem_069862;
  return (
    <header
      style={{
        height: 64,
        flex: "0 0 64px",
        background: "#fff",
        borderBottom: "1px solid var(--border-subtle)",
        display: "flex",
        alignItems: "center",
        gap: 18,
        padding: "0 24px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 7, fontWeight: 600, color: "var(--text-strong)", fontSize: 15 }}>
        <span style={{ width: 26, height: 26, borderRadius: 7, background: "var(--cb-blue-50)", color: "var(--cb-blue)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="globe" size={15} />
        </span>
        {workspace}
        <Icon name="chevronDown" size={15} style={{ color: "var(--text-muted)" }} />
      </div>

      <div
        style={{
          flex: 1, maxWidth: 460, display: "flex", alignItems: "center", gap: 10,
          height: 40, padding: "0 14px",
          background: "var(--cb-gray-50)",
          border: "1px solid var(--border-subtle)",
          borderRadius: "var(--radius-pill)",
          color: "var(--text-muted)",
        }}
      >
        <Icon name="search" size={17} />
        <input
          placeholder="Search by Name, Email, Company, Profession"
          onChange={(e) => onSearch && onSearch(e.target.value)}
          style={{ border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-strong)", width: "100%" }}
        />
      </div>

      <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ position: "relative", color: "var(--text-body)", cursor: "pointer" }}>
          <Icon name="bell" size={20} />
          <span style={{ position: "absolute", top: -3, right: -3, width: 15, height: 15, borderRadius: "50%", background: "var(--cb-danger)", color: "#fff", fontSize: 9, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>1</span>
        </span>
        <Avatar name="Aditi Kapoor" status="online" size={34} />
      </div>
    </header>
  );
}
window.CBTopbar = Topbar;