import React, { useEffect } from "react";
import TopHeader from "./TopHeader";

/**
 * DefaultPageLayout - Common layout for all mainadmin pages
 *
 * @param {Object} props
 * @param {string} props.title - Page title (used as browser title)
 * @param {string} [props.subtitle] - Subtitle text
 * @param {React.ReactNode} props.children - Page content
 */
const DefaultPageLayout = ({ title, subtitle, children }) => {
  // Set browser page title
  useEffect(() => {
    if (title) {
      const appTitle = window?.arraySubs?.env?.appTitle || "ArraySubs";
      document.title = `${title} - ${appTitle}`;
    }
  }, [title]);

  return (
    <>
      {/* Top Header with tabs */}
      <TopHeader title={title} subtitle={subtitle} />
      <main className="arraysubs-default-page-layout">
        {/* Page Content */}
        <div className="arraysubs-page-content">{children}</div>
      </main>
    </>
  );
};

export default DefaultPageLayout;