'use client'

import { Sidebar } from '@/components/Sidebar'
import { useTheme } from '@/lib/ThemeContext'
import { useNativeLanguage } from '@/lib/useNativeLanguage'
import { LanguageSwitcher } from '@/components/learn/LanguageSwitcher'

/**
 * Shared layout for ALL /learn/* pages.
 * Provides: Sidebar + gradient background + language switcher.
 */
export default function LearnLayout({ children }: { children: React.ReactNode }) {
  const { isDark } = useTheme()
  const { nativeLang, setNativeLang, isThirdLanguage } = useNativeLanguage()

  return (
    <div className={`min-h-screen flex relative overflow-hidden ${
      isDark
        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'
    }`}>
      <div className="relative z-10 p-4 flex-shrink-0">
        <Sidebar />
      </div>
      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto scrollbar-hide" style={{ scrollbarWidth: 'none' }}>
        {/* Sticky language switcher at top-right */}
        <div className="sticky top-0 z-20 flex justify-end px-4 py-2">
          <LanguageSwitcher
            currentLang={nativeLang}
            onLangChange={setNativeLang}
            isDark={isDark}
          />
        </div>
        {children}
        <div className="text-center py-4">
          <a href="/impressum" className={`text-[10px] ${isDark ? 'text-white/20 hover:text-white/40' : 'text-slate-300 hover:text-slate-500'}`}>
            Impressum
          </a>
        </div>
      </div>
    </div>
  )
}