'use client'

import type { ReactNode } from 'react'
import AdminSidebar from './AdminSidebar'

type AdminShellProps = {
  title: string
  subtitle?: string
  actions?: ReactNode
  rail?: ReactNode
  children: ReactNode
}

export default function AdminShell({ title, subtitle, actions, rail, children }: AdminShellProps) {
  return (
    <div className="admin-shell">
      <aside className="admin-shell-nav">
        <AdminSidebar />
      </aside>
      <main className="card admin-card">
        <div className="admin-header">
          <div>
            <h1>{title}</h1>
            {subtitle && <p className="lede">{subtitle}</p>}
          </div>
          {actions}
        </div>
        {children}
      </main>
      <aside className="admin-shell-rail">
        {rail ?? (
          <div className="admin-rail-card admin-rail-card--placeholder">
            <span className="admin-rail-eyebrow">Insights</span>
            <h2>Stats rail</h2>
            <p>Use this column for counters, live status, and quick metrics for this page.</p>
            <span className="small-pill">{title}</span>
          </div>
        )}
      </aside>
    </div>
  )
}
