"use client";

import Link from "next/link";

export function RouteLoadingState({
  area,
  description,
}: {
  area: string;
  description: string;
}) {
  return (
    <main className="route-state-shell" aria-busy="true" aria-live="polite">
      <section className="route-state-card route-loading-card">
        <span className="route-state-kicker">{area}</span>
        <h1>正在加载最新状态</h1>
        <p>{description}</p>
        <div className="route-loading-lines" aria-hidden="true">
          <span />
          <span />
          <span />
        </div>
      </section>
    </main>
  );
}

export function RouteErrorState({
  area,
  title,
  description,
  reset,
  dashboard = false,
}: {
  area: string;
  title: string;
  description: string;
  reset: () => void;
  dashboard?: boolean;
}) {
  return (
    <main className="route-state-shell">
      <section className="route-state-card route-error-card" role="alert">
        <span className="route-state-kicker">{area}</span>
        <h1>{title}</h1>
        <p>{description}</p>
        <p className="route-state-note">
          这次页面失败不能证明你的主机或会话中继已经离线。先查看服务状态，再决定是否重新执行刚才的操作。
        </p>
        <div className="route-state-actions">
          <button className="button button-primary" type="button" onClick={reset}>
            重试加载
          </button>
          <Link className="button button-secondary" href="/status">
            查看服务状态
          </Link>
          <Link
            className="route-state-link"
            href={dashboard ? "/dashboard/feedback" : "/"}
          >
            {dashboard ? "仍有问题，提交反馈" : "返回首页"}
          </Link>
        </div>
      </section>
    </main>
  );
}