﻿import { Head } from '@inertiajs/react';
import { AlertCircle } from 'lucide-react';
import type { ReactNode } from 'react';

import { AdminShell } from '@/components/admin/admin-shell';
import type { AdminMenu } from '@/components/admin/admin-shell';
import AppearanceToggle from '@/components/appearance-toggle';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export function AdminPage({
    activeMenu,
    backendMessage,
    children,
    description,
    title,
}: {
    activeMenu: AdminMenu;
    backendMessage?: string | null;
    children: ReactNode;
    description: string;
    title: string;
}) {
    return (
        <>
            <Head title={title} />

            <AdminShell activeMenu={activeMenu}>
                <main className="lecturer-page">
                    <section className="lecturer-page-header">
                        <div>
                            <h1>{title}</h1>
                            <p>{description}</p>
                        </div>

                        <div className="lecturer-header-actions hidden sm:flex">
                            <AppearanceToggle className="lecturer-theme-toggle" />
                        </div>
                    </section>

                    {backendMessage ? (
                        <Alert
                            className="border-destructive/30 bg-destructive/10"
                            variant="destructive"
                        >
                            <AlertCircle className="size-4" />
                            <AlertTitle>Response backend</AlertTitle>
                            <AlertDescription>{backendMessage}</AlertDescription>
                        </Alert>
                    ) : null}

                    {children}
                </main>
            </AdminShell>
        </>
    );
}



