/* Thread.jsx , Vertical list of MessageBubble rows for the brief workspace. */
function Thread({ campaign }) {
 const messages = [
  {
   who: 'them',
   initials: 'MR',
   name: 'Maren Ito',
   role: 'Creator · @maren.ito · 84k followers',
   time: '2h ago',
   body: 'Got the brief, love the Q3 launch direction. Two questions before I start scripting: are we leaning more clinical (derm language) or lifestyle (sun + glow)? And do you have a hero shot or should I shoot my own?',
  },
  {
   who: 'me',
   initials: 'LP',
   name: 'Lena Park',
   role: 'Campaign lead · Bright Floppy',
   time: '1h ago',
   body: 'Hi Maren, leaning lifestyle, sun + glow, no clinical claims. I\'ll ship you a hero shot from the Lumen product team by EOD. Will you be in studio or shooting on location?',
  },
  {
   who: 'them',
   initials: 'MR',
   name: 'Maren Ito',
   role: 'Creator · @maren.ito · 84k followers',
   time: '40m ago',
   body: 'Studio. I\'ll pull looks from the brand kit and propose three lighting setups. First cut by Friday morning your time. Sending the reference deck I drafted below.',
   attachments: [
    { name: 'lumen-q3-reference-deck.pdf', size: '2.1 MB' },
   ],
  },
 ];

 return (
  <section className="bf-thread" aria-label="Campaign thread">
   <div className="bf-thread__header">
    <span className="bf-eyebrow">Outreach thread</span>
    <span className="bf-chip bf-chip--lemon">{campaign ? campaign.status : ''}</span>
   </div>
   <div className="bf-thread__list">
    {messages.map((m, i) => <MessageBubble key={i} message={m} />)}
   </div>
  </section>
 );
}

window.Thread = Thread;