// ==========================================
// 📂 app/dashboard/layout.tsx
// 병렬 라우트는 layout 함수의 props로 자동으로 주입됩니다!
// ==========================================
export default function DashboardLayout({
  children,   // 기본 app/dashboard/page.tsx
  analytics,  // app/dashboard/@analytics/page.tsx
  team,       // app/dashboard/@team/page.tsx
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div className="flex flex-col gap-6 p-6">
      <header className="bg-slate-800 p-4 rounded-xl">
        {/* 공통 헤더나 제목을 배치하는 children 영역 */}
        {children}
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 두 컴포넌트가 병렬로(독립적으로) 데이터를 Fetching하고 렌더링됩니다. */}
        {/* 둘 중 하나가 느려도 다른 하나는 먼저 화면에 표시될 수 있습니다. */}
        <section className="border border-purple-500/30 bg-purple-500/5 rounded-xl p-4">
          <h2 className="text-purple-400 font-bold mb-4">Analytics Slot</h2>
          {analytics}
        </section>

        <section className="border border-emerald-500/30 bg-emerald-500/5 rounded-xl p-4">
          <h2 className="text-emerald-400 font-bold mb-4">Team Slot</h2>
          {team}
        </section>
      </div>
    </div>
  )
}