type PlaceholderPageProps = {
  title: string;
  description: string;
};

export function PlaceholderPage({ title, description }: PlaceholderPageProps) {
  return (
    <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
      <div>
        <h1 className="font-display display-lg text-ink">{title}</h1>
        <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
          {description}
        </p>
      </div>

      <section className="relative overflow-hidden rounded-3xl border border-hairline bg-canvas-soft px-10 py-20 text-center">
        <div
          aria-hidden
          className="pointer-events-none absolute -right-24 top-0 h-72 w-72 rounded-full opacity-50 blur-3xl"
          style={{
            backgroundImage:
              "radial-gradient(circle, color-mix(in srgb, var(--gradient-sky) 50%, transparent), transparent 70%)",
          }}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute -left-20 bottom-0 h-64 w-64 rounded-full opacity-45 blur-3xl"
          style={{
            backgroundImage:
              "radial-gradient(circle, color-mix(in srgb, var(--gradient-lavender) 50%, transparent), transparent 70%)",
          }}
        />
        <div className="relative">
          <div className="caption-label inline-flex rounded-full bg-surface-strong px-3 py-1 text-muted-foreground">
            建设中
          </div>
          <p className="font-display display-sm mx-auto mt-5 max-w-md text-ink">
            这个页面正在编写中
          </p>
          <p className="mx-auto mt-3 max-w-md text-sm leading-7 text-body">
            页面骨架与设计语言已就绪，后续将填充具体功能与数据。
          </p>
        </div>
      </section>
    </div>
  );
}