'use client'

import { Menu } from 'lucide-react'
import { SettingsNav } from '@/components/settings'
import { useLanguage } from '@/lib/i18n'

export default function SettingsLayout({
    children,
}: {
    children: React.ReactNode
}) {
    const { t } = useLanguage()
    return (
        <div className="flex flex-col h-full bg-[#F2F0E9] dark:bg-dark-paper">
            <header className="px-4 sm:px-8 md:px-12 pt-8 sm:pt-14 md:pt-20 pb-6 sm:pb-10 md:pb-16 space-y-6 sm:space-y-10 md:space-y-12 shrink-0">
                <div className="flex items-start gap-3">
                    <button
                        className="md:hidden p-2 -ms-1 text-ink/70 hover:bg-ink/5 rounded-lg transition-colors shrink-0 mt-1"
                        onClick={() => window.dispatchEvent(new CustomEvent('open-mobile-sidebar'))}
                        aria-label={t('settings.title')}
                    >
                        <Menu size={22} />
                    </button>
                    <div>
                        <h1 className="text-3xl sm:text-5xl md:text-[64px] font-serif text-ink tracking-tight leading-none italic font-medium">
                            {t('settings.title')}
                        </h1>
                        <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60 mt-4">
                            {t('settings.description')}
                        </p>
                    </div>
                </div>

                <SettingsNav />
            </header>

            <div className="flex-1 overflow-y-auto">
                <div className="max-w-5xl mx-auto px-4 sm:px-8 md:px-12 py-6 sm:py-8 md:py-10 space-y-8">
                    {children}
                </div>
            </div>
        </div>
    )
}