import { MoreHorizontal, Search } from 'lucide-react';
import {
  Badge,
  Button,
  Input,
  PageShell,
} from '@/ui';

export function MediaLibraryPageTemplate() {
  return (
    <PageShell
      title="素材管理"
      description="媒体优先展示，操作在悬停或更多菜单中出现。"
      actions={<Input aria-label="搜索素材" placeholder="搜索素材" leading={<Search />} />}
    >
      <section className="tg-golden-library">
        {Array.from({ length: 8 }).map((_, index) => (
          <article className="tg-golden-library__item" key={index}>
            <div className="tg-golden-library__media">
              <div className="tg-golden-library__hover">
                <Button variant="secondary" size="icon" aria-label="更多操作">
                  <MoreHorizontal size={16} />
                </Button>
              </div>
            </div>
            <footer className="tg-golden-library__meta">
              <span>品牌主视觉 {index + 1}</span>
              <Badge tone="neutral">图片</Badge>
            </footer>
          </article>
        ))}
      </section>
    </PageShell>
  );
}