'use client';
import { useState } from 'react';
import Sidebar from './Sidebar';
import TopBar from './TopBar';
import Footer from './Footer';
import AuthGuard from './AuthGuard';

interface HRLayoutProps {
  children: React.ReactNode;
  title: string;
  breadcrumb?: string;
  plain?: boolean;
}

export default function HRLayout({ children, title, breadcrumb, plain }: HRLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  if (plain) {
    return <>{children}</>;
  }

  return (
    <AuthGuard>
      <div className="min-h-screen bg-gray-50 flex flex-col">
        <Sidebar mobileOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
        <TopBar title={title} breadcrumb={breadcrumb} onMenuClick={() => setSidebarOpen(true)} />
        <main className="lg:ml-64 pt-16 flex-1">
          <div className="p-4 lg:p-6">
            {children}
          </div>
        </main>
        <div className="lg:ml-64">
          <Footer />
        </div>
      </div>
    </AuthGuard>
  );
}