"use client";

import type { ReactNode } from "react";
import SettingsNavigation from "./SettingsNavigation";
import PageHeading from "./PageHeading";

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 admin-shell--top-nav">
      <SettingsNavigation />
      <main className="card admin-card">
        <PageHeading title={title} description={subtitle} actions={actions} />
        {children}
        {rail && (
          <details className="admin-supplemental">
            <summary>Additional information</summary>
            {rail}
          </details>
        )}
      </main>
    </div>
  );
}