import { Search } from 'lucide-react';
import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  Input,
  PageShell,
  Section,
  Table,
  TBody,
  TD,
  TH,
  THead,
  TR,
} from '@/ui';

export function ListPageTemplate() {
  return (
    <PageShell
      title="页面标题"
      description="用一句话说明这个页面帮助用户完成什么。"
      actions={<Button>新增项目</Button>}
    >
      <Section
        title="列表筛选"
        actions={<Input aria-label="搜索" placeholder="搜索" leading={<Search />} />}
      >
        <Card>
          <CardHeader title="数据列表" description="保持密集、清晰、可扫描。" />
          <CardContent>
            <Table>
              <THead>
                <TR>
                  <TH>名称</TH>
                  <TH>状态</TH>
                  <TH>更新时间</TH>
                </TR>
              </THead>
              <TBody>
                <TR>
                  <TD>示例项目</TD>
                  <TD>
                    <Badge tone="brand">进行中</Badge>
                  </TD>
                  <TD>刚刚</TD>
                </TR>
              </TBody>
            </Table>
          </CardContent>
        </Card>
      </Section>
    </PageShell>
  );
}