import { type ReactNode } from 'react';

import { DashboardFooter } from '@admin/components/layout/dashboard-footer';
import { Header } from '@admin/components/layout/header';
import { PageHeader } from '@admin/components/layout/page-header';
import { Sidebar } from '@admin/components/layout/sidebar';
import { SyntoDashboardRoot } from '@admin/components/layout/synto-dashboard-root';

interface DashboardLayoutProps {
    title: string;
    subtitle?: string;
    description?: string;
    children: ReactNode;
}

export default function DashboardLayout({ title, subtitle, description, children }: DashboardLayoutProps) {
    return (
        <SyntoDashboardRoot>
            <Header />
            <Sidebar />
            <div className="content">
                <div className="main-content">
                    <PageHeader title={title} subtitle={subtitle} description={description} />
                    {children}
                </div>
            </div>
            <DashboardFooter />
        </SyntoDashboardRoot>
    );
}