/**
 * External dependencies.
 */
import React from 'react';

/**
 * Internal dependencies.
 */
import { TopNav, Footer, Content } from '../parts';

export default function SettingsLayout({ children, onSave, onRun, isLoading, showNavigation = true }) {
    const navigation = showNavigation ? [
        { name: 'Dashboard', href: '/dashboard' },
        { name: 'General Settings', href: '/settings' },
        { name: 'Data Options', href: '/data-options' },
        { name: 'Sync Logs', href: '/sync-logs' },
    ] : null;

    return (
        <>
            <div className="min-h-full bg-gray-50">
                <TopNav 
                    navigation={navigation}
                    onSave={onSave}
                    onRun={onRun}
                    isLoading={isLoading}
                />
                <Content className="space-y-6 py-8">
                    {children}
                </Content>
                <Footer />
            </div>
        </>
    )
}