import { UserDetailsPage } from '@/components/user-details/UserDetailsPage';
import AppLayout from '@/layouts/app-layout';
import { usePage } from '@inertiajs/react';
import type { ReactNode } from 'react';

declare const route: (...args: any[]) => string;

function Show() {
    const { user, roles = [], branches = [] } = usePage<any>().props;
    return <UserDetailsPage user={user} roles={roles} branches={branches} entityLabel="Employee" />;
}

Show.layout = (page: ReactNode & { props: any }) => {
    const user = (page as any).props?.user;
    return (
        <AppLayout
            title="Employee Details"
            breadcrumbs={[
                { title: 'Home', href: '/' },
                { title: 'Employees', href: route('users.index') },
                { title: user?.name ?? 'Details', href: '#' },
            ]}
        >
            {page}
        </AppLayout>
    );
};

export default Show;