'use client'

import { SettingsNav } from '@/components/settings'

export default function SettingsLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <div className="flex flex-col h-full bg-[#F2F0E9]">
            {/* Architectural header — matches Agents page */}
            <header className="flex flex-col px-12 pt-10 pb-0 border-b border-border/40 shrink-0">
                <div className="flex items-end justify-between mb-6">
                    <div>
                        <h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight">
                            Paramètres
                        </h1>
                        <p className="text-[11px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-2">
                            Configuration &amp; Préférences
                        </p>
                    </div>
                </div>
                {/* Tab nav flush to the border-bottom of header */}
                <SettingsNav className="-mb-px" />
            </header>

            {/* Page Content */}
            <div className="flex-1 overflow-y-auto">
                <div className="max-w-5xl mx-auto px-12 py-10 space-y-8">
                    {children}
                </div>
            </div>
        </div>
    )
}