/**
 * Root Layout Component
 * @description Main application layout with sidebar, header, and content area
 */

import type { ReactNode } from 'react';
import { Sidebar } from '@/components/dashboard/sidebar';
import { Header } from './header';
import { ChatAgent } from './chat-agent';

interface RootLayoutProps {
    children: ReactNode;
}

/**
 * RootLayout component
 * @description Wraps all pages with consistent sidebar and header layout
 * @param children - Page content to render
 * @returns RootLayout element
 */
export function RootLayout({ children }: RootLayoutProps) {
    return (
        <div
            className="min-h-screen"
            style={{
                backgroundColor: '#f7f8ff',
                backgroundImage: `
                    radial-gradient(at 0% 0%, #C8FAFF 0px, transparent 50%),
                    radial-gradient(at 100% 0%, #C6D7FE 0px, transparent 50%),
                    radial-gradient(at 100% 100%, #00CEE022 0px, transparent 50%),
                    radial-gradient(at 0% 100%, #6172F311 0px, transparent 50%)
                `,
            }}
        >
            {/* Global Header */}
            <Header />

            {/* Sidebar */}
            <Sidebar />

            {/* Main Content Area */}
            <main className="min-h-screen md:ml-[88px] lg:ml-[88px]">
                {children}
            </main>

            {/* Chat Agent Button - Fixed at bottom right */}
            <ChatAgent />
        </div>
    );
}

