Display Commentaries

<footer class="unleeshed-attribution">
  Powered by <a href="https://unleeshed.ai">Unleeshed</a>
</footer>

function CommentaryCard({ commentary }) {
  return (
    <article className="commentary-card">
      <header className="persona-header">
        <img 
          src={commentary.persona.image_url} 
          alt={commentary.persona.name}
          className="persona-avatar"
        />
        <div className="persona-info">
          <h3>{commentary.persona.name}</h3>
          <span className="expertise">NBA Analyst</span>
        </div>
      </header>
      
      <div className="commentary-content">
        <p>{commentary.content}</p>
      </div>
      
      {commentary.audio_url && (
        <AudioPlayer src={commentary.audio_url} />
      )}
      
      <footer className="attribution">
        Powered by <a href="https://unleeshed.ai">Unleeshed</a>
      </footer>
    </article>
  );
}

function DebateView({ topic, commentaries }) {
  return (
    <section className="debate-view">
      <header className="topic">
        <h2>{topic.content}</h2>
      </header>
      
      <div className="perspectives">
        {commentaries.map(c => (
          <article key={c.commentary_id} className="perspective">
            <div className="persona">
              <img src={c.persona.image_url} alt="" />
              <h3>{c.persona.name}</h3>
            </div>
            <blockquote>{c.content}</blockquote>
          </article>
        ))}
      </div>
      
      <footer className="attribution">
        Powered by <a href="https://unleeshed.ai">Unleeshed</a>
      </footer>
    </section>
  );
}

function TabbedCommentary({ commentaries }) {
  const [activeId, setActiveId] = useState(commentaries[0]?.persona.id);
  const active = commentaries.find(c => c.persona.id === activeId);
  
  return (
    <div className="tabbed-commentary">
      <nav className="persona-tabs">
        {commentaries.map(c => (
          <button
            key={c.persona.id}
            onClick={() => setActiveId(c.persona.id)}
            className={c.persona.id === activeId ? 'active' : ''}
          >
            <img src={c.persona.image_url} alt="" />
            <span>{c.persona.name}</span>
          </button>
        ))}
      </nav>
      
      {active && (
        <article className="active-commentary">
          <p>{active.content}</p>
          {active.audio_url && <AudioPlayer src={active.audio_url} />}
        </article>
      )}
      
      <footer className="attribution">
        Powered by <a href="https://unleeshed.ai">Unleeshed</a>
      </footer>
    </div>
  );
}

function AudioPlayer({ src, personaName }) {
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef(null);
  
  const togglePlay = () => {
    if (isPlaying) {
      audioRef.current.pause();
    } else {
      audioRef.current.play();
    }
    setIsPlaying(!isPlaying);
  };
  
  return (
    <div className="audio-player">
      <audio 
        ref={audioRef} 
        src={src}
        onEnded={() => setIsPlaying(false)}
      />
      <button onClick={togglePlay} aria-label={isPlaying ? 'Pause' : 'Play'}>
        {isPlaying ? <PauseIcon /> : <PlayIcon />}
      </button>
      <span>Listen to {personaName}</span>
    </div>
  );
}

.commentary-card {
  max-width: 600px;
  padding: 1.5rem;
}

@media (max-width: 640px) {
  .commentary-card {
    padding: 1rem;
  }
  
  .persona-avatar {
    width: 40px;
    height: 40px;
  }
}

function CommentaryLoader({ personas, status, summary }) {
  return (
    <div className="loading-state">
      <div className="progress">
        <div 
          className="progress-bar"
          style={{ width: `${(summary.completed / summary.total_personas) * 100}%` }}
        />
      </div>
      <p>
        Generating commentary... 
        ({summary.completed}/{summary.total_personas} ready)
      </p>
      <div className="persona-status">
        {personas.map(p => (
          <div key={p.id} className={`persona ${p.status}`}>
            <img src={p.image_url} alt="" />
            {p.status === 'completed' && <CheckIcon />}
            {p.status === 'pending' && <Spinner />}
          </div>
        ))}
      </div>
    </div>
  );
}