import { RefreshCw } from 'lucide-react';
import {
  Badge,
  Button,
  PageShell,
  Progress,
  Section,
} from '@/ui';

const rows = [
  { name: '图片生成队列', status: '运行中', progress: 72 },
  { name: '视频转码任务', status: '等待中', progress: 18 },
  { name: '发布中心同步', status: '已完成', progress: 100 },
];

export function StatusPageTemplate() {
  return (
    <PageShell
      title="任务中心"
      description="状态页面沿用 /image 的批次、进度和简洁信息密度。"
      actions={<Button variant="outline" icon={<RefreshCw />}>刷新</Button>}
    >
      <Section title="今天">
        <div className="tg-golden-status">
          {rows.map((row) => (
            <article className="tg-golden-status__row" key={row.name}>
              <div>
                <h3>{row.name}</h3>
                <p>{row.progress}%</p>
              </div>
              <Progress value={row.progress} />
              <Badge tone={row.progress === 100 ? 'success' : 'brand'}>
                {row.status}
              </Badge>
            </article>
          ))}
        </div>
      </Section>
    </PageShell>
  );
}