/* CampaignsList.jsx , Vertical list of campaign rows in the sidebar. */
const CAMPAIGNS = [
 { id: 'c1', name: 'Lumen Skincare · Q3 launch', status: 'In flight', dot: 'active', last: '2h ago', unread: true },
 { id: 'c2', name: 'Northbound Outdoors · Spring trail', status: 'Reporting', dot: 'pending', last: 'Yesterday', unread: false },
 { id: 'c3', name: 'Pixel & Pour · Coffee drop', status: 'Brief sent', dot: 'active', last: '3 days ago', unread: false },
 { id: 'c4', name: 'Sora Studio · Headphone launch', status: 'Drafting', dot: 'paused', last: '5 days ago', unread: false },
 { id: 'c5', name: 'Bento Cat · Apparel collab', status: 'Approved', dot: 'active', last: '1 week ago', unread: false },
];

function CampaignsList({ activeId, onSelect, filter }) {
 const items = CAMPAIGNS.filter(c => filter === 'all' || c.dot === filter);

 return (
  <div className="bf-campaign-list" role="list" aria-label="Campaigns">
   <div className="bf-campaign-list__header">
    <span className="bf-eyebrow">Campaigns</span>
    <button className="bf-btn bf-btn--ghost bf-btn--sm" aria-label="New campaign">+ New</button>
   </div>
   <ul className="bf-campaign-list__items">
    {items.map(c => (
     <li key={c.id}>
      <button
       role="listitem"
       className={'bf-campaign-row' + (activeId === c.id ? ' bf-campaign-row--active' : '')}
       onClick={() => onSelect(c.id)}
       aria-current={activeId === c.id}
      >
       <span className={'bf-dot bf-dot--' + c.dot} aria-hidden="true"></span>
       <span className="bf-campaign-row__main">
        <span className="bf-campaign-row__name">{c.name}</span>
        <span className="bf-campaign-row__meta">
         <span className={'bf-chip bf-chip--' + (c.dot === 'active' ? 'success' : c.dot === 'pending' ? 'warning' : 'default')}>
          {c.status}
         </span>
         <span className="bf-campaign-row__time">{c.last}</span>
        </span>
       </span>
       {c.unread && <span className="bf-campaign-row__dot" aria-label="Unread"></span>}
      </button>
     </li>
    ))}
   </ul>
  </div>
 );
}

window.CampaignsList = CampaignsList;