/* Sentence books list/detail */

function SentenceBooksPage({ bookId, navigate, onBack }) {
  if (bookId) {
    const book = SEED_SENTENCE_BOOKS.find((b) => b.id === bookId);
    const items = SEED_SENTENCES[bookId] || [];
    return (
      <div className="zen-page">
        <PageHeader title={book ? book.name : "例句本"} onBack={() => navigate("/sentence-books")} />
        <div className="zen-content">
          <div className="content-wrapper">
            <ZenCard>
              {items.map((e) => (
                <div key={e.id} className="example-card">
                  <div className="example-jp">{e.jp}</div>
                  <div className="example-zh">{e.zh}</div>
                </div>
              ))}
            </ZenCard>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="zen-page">
      <PageHeader title="例句庫" onBack={onBack || (() => navigate("/library"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          {SEED_SENTENCE_BOOKS.map((b) => (
            <div key={b.id} className="book-card" onClick={() => navigate(`/sentence-books/${b.id}`)}>
              <div>
                <div className="book-name">{b.name}</div>
                <div className="book-meta">{b.count} 句</div>
              </div>
              <Icon name="chevronRight" size={18} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SentenceBooksPage });