'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] dark:bg-dark-paper">
            <header className="px-12 pt-20 pb-16 space-y-12 shrink-0">
                <div className="space-y-4">
                    <h1 className="text-[64px] font-serif text-ink tracking-tight leading-none italic font-medium">
                        Paramètres
                    </h1>
                    <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">
                        Configuration & Préférences
                    </p>
                </div>

                <SettingsNav />
            </header>

            <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>
    )
}

