// src/components/basics/PageContentLayout.tsx
import React, {type ReactNode, useState} from "react";
import clsx from "clsx";
import {Settings} from "lucide-react";
import {SettingsMenu} from "../SettingsMenu";

/**
 * Layout wrapper for the main content area of a page.
 * Includes a settings button (top-right) that opens a global settings menu.
 */
type PageContentLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
    /** The main page content (e.g. header, body) */
    children: ReactNode;
};

export default function PageContentLayout({
                                              children,
                                              className,
                                              ...props
                                          }: PageContentLayoutProps) {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    return (
        <div
            {...props}
            className={clsx(
                "relative bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8",
                className
            )}
        >
            {/* Settings Button (top-right) */}
            <button
                onClick={() => setIsMenuOpen(true)}
                className="absolute top-4 right-4 p-2 rounded-full bg-white hover:bg-gray-200 shadow transition"
                title="Einstellungen"
            >
                <Settings size={20}/>
            </button>

            {/* Page content */}
            {children}

            {/* Overlay Settings Menu */}
            {isMenuOpen && <SettingsMenu onClose={() => setIsMenuOpen(false)}/>}
        </div>
    );
}
