'use client';

import React from 'react';
import AdminSidebar from '../../components/admin/AdminSidebar';
import '../../styles/admin.css';

// Note: metadata export removed because this is now a client component
// Add metadata to individual pages instead

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // For a real app, add auth check here to prevent unauthorized access
  // const { data: session, status } = useSession()
  // if (status === "loading") return <LoadingSpinner />
  // if (status === "unauthenticated") redirect('/admin/login')

  return (
    <div className="admin-container h-screen flex">
      {/* Sidebar */}
      <div className="w-64 md:block hidden">
        <AdminSidebar />
      </div>
      
      {/* Mobile sidebar (hidden by default) */}
      <div className="md:hidden">
        {/* We'd implement a mobile menu here */}
      </div>
      
      {/* Main content */}
      <div className="admin-content flex-1 flex flex-col overflow-y-auto">
        {/* Header */}
        <header className="admin-header shadow-sm">
          <div className="px-4 sm:px-6 lg:px-8 py-4">
            <div className="flex items-center justify-between">
              <h1 className="admin-header-title text-xl">
                Admin Portal
              </h1>
              
              {/* User menu */}
              <div className="flex items-center space-x-4">
                <div className="admin-header-user text-sm font-medium">
                  Admin User
                </div>
              </div>
            </div>
          </div>
        </header>
        
        {/* Page content */}
        <main className="admin-main flex-1">
          {children}
        </main>
      </div>
    </div>
  );
}