import { GenerationDotPlaceholder } from "@/components/generation-dot-placeholder";

export default function ParticlePreviewPage() {
  return (
    <main className="min-h-screen bg-[#f7f7f7] px-10 py-10 text-[#202124]">
      <div className="mx-auto flex max-w-6xl flex-col gap-8">
        <div>
          <h1 className="text-[28px] font-semibold tracking-tight">生成占位粒子预览</h1>
          <p className="mt-2 text-[14px] text-[#7d838b]">
            单独预览旋转粒子、3D 视差和进度条状态。
          </p>
        </div>

        <div className="grid gap-8 lg:grid-cols-[420px_1fr]">
          <section>
            <div className="mb-3 text-[14px] font-medium text-[#5f6670]">对话框尺寸</div>
            <GenerationDotPlaceholder
              className="h-[420px] w-[420px]"
              phase="processing"
              progress={41}
              title="正在创建图片"
            />
          </section>

          <section>
            <div className="mb-3 text-[14px] font-medium text-[#5f6670]">画布节点尺寸</div>
            <GenerationDotPlaceholder
              className="h-[360px] w-full"
              compact
              phase="processing"
              progress={67}
              title="正在润饰细节"
            />
          </section>
        </div>
      </div>
    </main>
  );
}