/* Sidebar.jsx , Left rail with brand, search, filters, campaign list, user. */
function Sidebar({ activeId, onSelect, filter, onFilterChange }) {
 const filters = [
  { id: 'all', label: 'All', count: 5 },
  { id: 'active', label: 'Active', count: 3 },
  { id: 'pending', label: 'Pending', count: 1 },
  { id: 'paused', label: 'Paused', count: 1 },
 ];

 return (
  <aside className="bf-sidebar" aria-label="Campaign navigation">
   <div className="bf-sidebar__brand">
    <img src="../../build/icon.svg" alt="Bright Floppy" className="bf-sidebar__logo" />
    <div>
     <div className="bf-sidebar__brandName">Bright Floppy</div>
     <div className="bf-sidebar__brandSub">Campaign ops</div>
    </div>
   </div>

   <div className="bf-sidebar__search">
    <input
     className="bf-input"
     type="search"
     placeholder="Search campaigns, creators…"
     aria-label="Search"
    />
   </div>

   <div className="bf-sidebar__filters" role="tablist">
    {filters.map(f => (
     <button
      key={f.id}
      role="tab"
      aria-selected={filter === f.id}
      className={'bf-sidebar__filter' + (filter === f.id ? ' bf-sidebar__filter--active' : '')}
      onClick={() => onFilterChange(f.id)}
     >
      <span>{f.label}</span>
      <span className="bf-sidebar__filterCount">{f.count}</span>
     </button>
    ))}
   </div>

   <CampaignsList
    activeId={activeId}
    onSelect={onSelect}
    filter={filter}
   />

   <div className="bf-sidebar__user">
    <div className="bf-avatar bf-avatar--sm" aria-hidden="true">L</div>
    <div style={{ flex: 1, minWidth: 0 }}>
     <div className="bf-sidebar__userName">Lena Park</div>
     <div className="bf-sidebar__userRole">Campaign lead</div>
    </div>
    <button className="bf-btn bf-btn--ghost bf-btn--sm" aria-label="Settings">⚙</button>
   </div>
  </aside>
 );
}

window.Sidebar = Sidebar;