'use client'

import React from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { Sidebar } from '@/components/Sidebar'

interface LearnLayoutProps {
  children: React.ReactNode
  gradient?: string
}

/**
 * Shared layout for all learn sub-pages.
 * Adds Sidebar + consistent gradient background.
 */
export function LearnLayout({ children, gradient }: LearnLayoutProps) {
  const { isDark } = useTheme()

  const bg = gradient || (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')

  return (
    <div className={`min-h-screen flex relative overflow-hidden ${bg}`}>
      <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">
        {children}
      </div>
    </div>
  )
}