'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { isAuthenticated } from '@/lib/auth'
import { Sidebar } from '@/components/layout/sidebar'

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

export function DashboardLayout({ children, title, description }: DashboardLayoutProps) {
    const router = useRouter()

    useEffect(() => {
        if (!isAuthenticated()) {
            router.push('/login')
        }
    }, [router])

    return (
        <div className="min-h-screen bg-background">
            <Sidebar />

            {/* Main Content Area - responsive margin for sidebar */}
            <div className="lg:pl-64">
                {/* Header */}
                {(title || description) && (
                    <header className="sticky top-0 z-30 border-b border-border/50 bg-background/80 backdrop-blur-lg">
                        <div className="px-8 py-6 pl-16 lg:pl-8">
                            {title && <h1 className="text-2xl font-bold">{title}</h1>}
                            {description && (
                                <p className="mt-1 text-sm text-muted-foreground">{description}</p>
                            )}
                        </div>
                    </header>
                )}

                {/* Page Content - extra top padding on mobile for hamburger button */}
                <main className="p-8 pt-4 lg:pt-8">
                    {children}
                </main>
            </div>
        </div>
    )
}