import Authenticated from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import { PageProps } from '@/types';
import Superadmin from '@/Layouts/DashboardLayouts/SuperadminLayout';
import Admin from '@/Layouts/DashboardLayouts/AdminLayout';
import EndUser from '@/Layouts/DashboardLayouts/EndUserLayout';

export default function Dashboard({ auth }: PageProps) {
    const thisUser = auth.user;

    const renderDashboardContent = () => {
        switch (thisUser.role_id) {
            case 1:
                return <Superadmin user={thisUser} />;
            case 2:
                return <Admin user={thisUser} />;
            case 3:
                return <EndUser user={thisUser} />;
            default:
                return null;
        }
    };
    
    return (
        <Authenticated user={thisUser}>
            <Head title="Dashboard" />

            <div className="drawer lg:drawer-open">
                <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
                <div className="drawer-content flex flex-row justify-between p-6 bg-neutral-20">
                    {renderDashboardContent()}
                </div>
                <div className="drawer-side">
                    <label htmlFor="my-drawer-2" aria-label="close sidebar" className="drawer-overlay"></label> 
                    
                    <ul className="menu p-4 w-56 h-full bg-primary-background text-base-content">
                        {/* Sidebar content here */}
                        <li><a>Sidebar Item 1</a></li>
                        <li><a>Sidebar Item 2</a></li>
                    </ul>
                </div>
            </div>
        </Authenticated>
    );
}
