import React from "react";
import TopNav from "./TopNav";

interface TopNavLayoutProps {
  title: string;
  icon?: React.ReactNode;
  userName?: string;
  userRole?: string;
  onSignOut?: () => void;
  onToggleSidebar?: () => void;
  children: React.ReactNode;
}

export default function TopNavLayout({
  title,
  icon,
  userName,
  userRole,
  onSignOut,
  onToggleSidebar,
  children,
}: TopNavLayoutProps) {
  return (
    <div className="relative z-10 min-h-screen flex flex-col text-primary">
      <TopNav 
        title={title} 
        icon={icon} 
        userName={userName} 
        userRole={userRole}
        onSignOut={onSignOut}
        onToggleSidebar={onToggleSidebar}
      />
      <main className="min-w-0 flex-1 w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 py-6 space-y-6">
        {children}
      </main>
    </div>
  );
}
