import { PageHeader } from "../components/page-header.jsx";

export default function StateGalleryPage() {
  return (
    <section className="ui-page">
      <PageHeader
        eyebrow="예제"
        title="화면 상태"
        description="로딩, 빈 화면, 오류, 인증 필요와 권한 없음 상태의 기본 표현을 확인합니다."
      />
      <div className="readiness-grid">
        <section className="ui-skeleton" aria-label="로딩 상태 예제" />
        <section className="ui-empty">
          <h2>표시할 항목이 없습니다.</h2>
          <p>다음 행동이 있다면 이 위치에 명확한 안내를 제공합니다.</p>
        </section>
        <section className="ui-terminal-error" role="alert">
          <h2>요청을 완료하지 못했습니다.</h2>
          <p>안전한 재시도 또는 지원 참조 정보를 제공합니다.</p>
        </section>
      </div>
    </section>
  );
}