import React, { useMemo } from 'react';
import AppLayout from '../../../layouts/app-layout';
import {
    Container,
    Title,
    Card,
    Group,
    Button,
    Badge,
    ActionIcon,
} from '@mantine/core';
import { IconEdit } from '@tabler/icons-react';
import { MantineReactTable } from 'mantine-react-table';
import type { MRT_Row } from 'mantine-react-table';
import { Link } from '@inertiajs/react';
import { Role } from "@/types";

interface Props {
    roles: Role[];
}

export default function Page({
    roles,
}: Props) {
    const rolesData = roles ?? [];
    const columns = useMemo(
        () => [
            {
                accessorKey: 'name',
                header: 'Name',
            },
        ],
        []
    );

    const renderRowActions = ({ row }: { row: MRT_Row<Role> }) => (
        <Group spacing="xs">
            <ActionIcon
                color="blue"
                component={Link}
                href={`/management/roles/${row.original.id}/edit`}
            >
                <IconEdit size={18} />
            </ActionIcon>
        </Group>
    );

    return (
        <AppLayout>
            <Container size="xl" px="xs">
                <Title order={2} mb="md">
                    Roles
                </Title>
                <MantineReactTable
                    columns={columns}
                    data={rolesData}
                    enablePagination
                    rowCount={roles?.total ?? roles.length}
                    initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
                    renderRowActions={renderRowActions}
                    enableRowActions
                    columnPinning={{ right: ['mrt-row-actions'] }}
                />
            </Container>
        </AppLayout>
    );
}