// 选修课页面（家长查看子女选修课）
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/elective

"use client";

import { useChildElective } from "@/hooks/useChildElective";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { ElectiveSelectionList } from "@/components/ElectiveSelectionList";

export default function ElectivePage(): JSX.Element {
  const { currentChild } = useChildSwitcher();
  const { electiveSelections, loading, error } = useChildElective();

  if (loading) {
    return (
      <div className="space-y-4" role="status" aria-live="polite">
        <span className="skeleton h-8 w-48 rounded" aria-hidden="true" />
        <span className="skeleton h-32 w-full rounded" aria-hidden="true" />
        <span className="skeleton h-32 w-full rounded" aria-hidden="true" />
        <span className="sr-only">加载选修课中...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div
        role="alert"
        className="rounded border border-danger p-4 text-sm text-danger"
      >
        加载失败：{error.message}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">{currentChild?.name}的选修课</h1>
      <ElectiveSelectionList electiveSelections={electiveSelections} />
    </div>
  );
}