import { Sparkles } from 'lucide-react';
import {
  Button,
  FormGrid,
  Input,
  Select,
  Textarea,
} from '@/ui';

export function GeneratorPageTemplate() {
  return (
    <main className="tg-golden-generator">
      <section className="tg-golden-generator__panel">
        <header className="tg-golden-generator__header">
          <h1>图片创作</h1>
        </header>
        <Textarea
          label="图片描述"
          placeholder="描述需要生成的内容"
        />
        <FormGrid>
          <Select label="生成参数" defaultValue="auto">
            <option value="auto">Auto, 1K, Auto</option>
          </Select>
          <Input label="模型" placeholder="选择模型" />
        </FormGrid>
        <Button icon={<Sparkles />} className="tg-golden-generator__submit">
          生成
        </Button>
      </section>

      <section className="tg-golden-generator__feed">
        <header className="tg-golden-generator__feed-header">
          <h2>今天</h2>
          <p>结果按批次显示，媒体保持完整比例。</p>
        </header>
        <article className="tg-golden-generator__batch">
          <h3>一张用于品牌内容发布的专业 AI 主视觉</h3>
          <p>4 张 | 1024x1024 | gpt-image-2-vip</p>
          <div className="tg-golden-generator__rail" aria-label="生成结果">
            <div className="tg-golden-generator__media" />
            <div className="tg-golden-generator__media" />
            <div className="tg-golden-generator__media" />
          </div>
          <div className="tg-golden-generator__actions">
            <Button variant="outline">编辑</Button>
            <Button variant="outline">重新生成</Button>
            <Button variant="ghost">更多</Button>
          </div>
        </article>
      </section>
    </main>
  );
}