import Link from "next/link";
import { demoBooks } from "@/data/demo-books";

export default function LibraryPage() {
  return (
    <main className="page-shell">
      <section className="page-title">
        <h1>书架</h1>
        <p>现在书架里放了 4 本演示书，方便你直接测试书架布局、阅读页排版，以及从书架进入阅读器的整体体验。</p>
      </section>

      <section className="library-shell">
        <div className="library-grid">
          {demoBooks.map((book) => (
            <article className="book-card" key={book.id}>
              <div className="book-cover" style={{ ["--cover" as string]: book.coverStyle }}>
                <div className="book-cover__chip">{book.category}</div>
                <h2 className="book-cover__title">{book.title}</h2>
                <p className="book-cover__author">{book.author}</p>
              </div>

              <div className="book-body">
                <div className="chip-row">
                  <span className="chip">{book.wordCount}</span>
                  <span className="chip">{book.chapters.length} 章演示内容</span>
                </div>
                <p>{book.description}</p>
                <Link className="button button--primary" href={`/reader/${book.id}`}>
                  开始阅读
                </Link>
              </div>
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}