'use client'

import Container from '@/components/frontend/Container'
import AccountSidebar from './AccountSidebar'
import EmailVerificationBanner from './EmailVerificationBanner'
import { useAccountUser } from './AccountUserContext'

interface AccountLayoutProps {
  children: React.ReactNode
  title: string
  description?: string
}

// Session validation itself now happens server-side, once, in
// (root)/[locale]/account/layout.tsx — by the time this component renders,
// `useAccountUser()` is guaranteed a real, logged-in user. This is purely
// the shared sidebar + title + email-verification-banner shell every
// /account page renders inside.
export default function AccountLayout({ children, title, description }: AccountLayoutProps) {
  const user = useAccountUser()

  return (
    <Container className="py-8">
      <div className="flex flex-col md:flex-row gap-8">
        {/* Sidebar - Visible on desktop */}
        <AccountSidebar />

        {/* Main Content */}
        <div className="flex-1">
          <div className="mb-6">
            <h1 className="text-2xl font-bold text-dark">{title}</h1>
            {description && (
              <p className="text-gray-custom text-sm mt-1">{description}</p>
            )}
          </div>

          {!user.emailVerified && <EmailVerificationBanner email={user.email} />}

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            {children}
          </div>
        </div>
      </div>
    </Container>
  )
}