import Link from "next/link";
import {
  AppBrand,
  BookIcon,
  HeadphonesIcon,
  SearchIcon,
  UploadIcon,
} from "@/components/AppBrand";
import { LibraryView } from "@/components/library/LibraryView";

export default function Home() {
  return (
    <div className="app-shell">
      <header className="topbar">
        <AppBrand />

        <label className="search-box">
          <SearchIcon />
          <span className="sr-only">搜索书名或作者</span>
          <input
            form="library-search-form"
            name="q"
            type="search"
            placeholder="搜索书名或作者"
            autoComplete="off"
          />
          <kbd>⌘ K</kbd>
        </label>

        <Link className="button button-primary top-upload" href="/import">
          <UploadIcon />
          <span>上传一本书</span>
        </Link>
      </header>

      <div className="public-notice" role="note">
        <span aria-hidden="true">!</span>
        <p><strong>这是公开书架。</strong>知道网址的人都可以访问和修改此书架，请只上传你愿意公开存放的无 DRM 文件。</p>
      </div>

      <LibraryView />

      <nav className="mobile-nav" aria-label="主要导航">
        <Link className="active" href="/"><BookIcon /><span>书架</span></Link>
        <Link className="mobile-upload" href="/import"><UploadIcon /><span>上传</span></Link>
        <span aria-disabled="true"><HeadphonesIcon /><span>正在播放</span></span>
      </nav>
    </div>
  );
}
