Stacked Layout

"use client";

import * as React from "react";

/**
 * Stacked Layout — 상하 2단 레이아웃 (바깥 레이아웃 셸).
 *
 * 구조:
 *   ┌──────────────┐
 *   │    Top       │  ← 고정 상단 (헤더 / 액션 바)
 *   ├──────────────┤
 *   │   Content    │  ← 본문 (스크롤)
 *   └──────────────┘
 *
 * 본문에 무엇이든 넣을 수 있는 셸. 여기선 placeholder 영역만 표시.
 */

function Region({
  label,
  className,
  children,
}: {
  label: string;
  className?: string;
  children?: React.ReactNode;
}) {
  return (
    <div
      className={
        "relative flex items-center justify-center border border-dashed border-border bg-muted/30 " +
        (className ?? "")
      }
    >
      <span className="absolute left-2 top-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
        {label}
      </span>
      {children}
    </div>
  );
}

export function StackedLayoutTemplate() {
  return (
    <div className="flex h-[520px] w-full flex-col gap-3 p-4">
      <Region label="Top" className="h-16 shrink-0" />
      <Region label="Content" className="flex-1" />
    </div>
  );
}