import { DataTable } from '@/components/data-table';
import AppLayout from '@/layouts/app-layout';
import { BreadcrumbItem, User } from '@/types';
import { Head } from '@inertiajs/react';
import { RoleProvider } from '../role-context';
import  RoleForm from '../role-form';
import { columns } from './columns';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
    },
    {
        title: 'Roles',
        href: '/roles',
    },
];

const Page = ({ users }: { users: User[] }) => {
    return (
        <RoleProvider>
            <AppLayout breadcrumbs={breadcrumbs}>
                <Head title="Roles" />
                <div className="flex h-full flex-col gap-4 rounded-xl p-4">
                    <div className="flex justify-end">
                        <RoleForm />
                    </div>
                    <DataTable columns={columns} data={roles} />
                </div>
            </AppLayout>
        </RoleProvider>
    );
};

export default Page;


