'use client'

import React from 'react'
import { Header } from '../common/Header'
import { Footer } from '../common/Footer'
import { useAuth } from '@/lib/hooks/useAuth'
import { useRouter } from 'next/navigation'

export interface MainLayoutProps {
  children: React.ReactNode
}

export const MainLayout = ({ children }: MainLayoutProps) => {
  const { user, isAuthenticated, logout } = useAuth()
  const router = useRouter()

  const handleLogin = () => {
    router.push('/auth/login')
  }

  return (
    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
      <Header
        isAuthenticated={isAuthenticated}
        userDisplayName={user?.display_name || user?.email}
        onLogin={handleLogin}
        onLogout={logout}
      />

      <main className="flex-1">
        {children}
      </main>

      <Footer />
    </div>
  )
}