Three Column Layout

"use client";

import * as React from "react";

/**
 * Three Column Layout — 좌우 3단 레이아웃 (바깥 레이아웃 셸).
 *
 * 구조:
 *   ┌──────┬───────────┬──────┐
 *   │ Left │   Main     │ Right│
 *   │      │            │      │
 *   └──────┴───────────┴──────┘
 *
 * 좌/우 사이드(고정 폭) + 가운데 메인(가변). 모바일에선 세로 적층.
 */

function Region({
  label,
  className,
}: {
  label: string;
  className?: string;
}) {
  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>
    </div>
  );
}

export function ThreeColumnLayoutTemplate() {
  return (
    <div className="flex h-[520px] w-full flex-col gap-3 p-4 lg:flex-row">
      <Region label="Left" className="h-24 shrink-0 lg:h-auto lg:w-56" />
      <Region label="Main" className="flex-1" />
      <Region label="Right" className="h-24 shrink-0 lg:h-auto lg:w-56" />
    </div>
  );
}