// MultiChildTabBar：多子女水平标签栏
// 依据：02-architecture-design.md §15.2 MultiChildTabBar 设计
// - 当 hasMultipleChildren 时在页面顶部显示标签栏
// - 当前选中子女高亮
// - ISSUE-009：纯前端切换

"use client";

import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { cn } from "@/lib/utils";

export function MultiChildTabBar() {
  const { children, currentChildId, switchChild, hasMultipleChildren } =
    useChildSwitcher();

  if (!hasMultipleChildren) return null;

  return (
    <nav
      role="tablist"
      aria-label="选择子女"
      className="flex gap-1 border-b border-rule"
    >
      {children
        .filter((c) => !c.isArchived)
        .map((child) => {
          const isActive = child.id === currentChildId;
          return (
            <button
              key={child.id}
              role="tab"
              aria-selected={isActive}
              type="button"
              onClick={() => switchChild(child.id)}
              className={cn(
                "border-b-2 px-4 py-2 text-sm transition-colors",
                isActive
                  ? "border-accent font-medium text-ink"
                  : "border-transparent text-ink-muted hover:text-ink",
              )}
            >
              <span className="font-serif">{child.name}</span>
            </button>
          );
        })}
    </nav>
  );
}

export default MultiChildTabBar;
