import React from "react";
import AppLayout from "@/layouts/app-layout";
import { Button, Card, Container, Group, Title } from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import { Link } from "@inertiajs/react";
import UserForm from "@/forms/management/UserForm";
import { Role } from "@/types";

interface Props {
    roles: Role[];
    managers: { value: string; label: string }[];
}

export default function Page({ roles, managers }: Props) {
    return (
        <AppLayout>
            <Container size="lg" px="xs">
                <Group position="apart" mb="md">
                    <Title order={2}>Create User</Title>
                    <Button
                        component={Link}
                        href={route("management.users.index")}
                        leftIcon={<IconArrowLeft size={16} />}
                        variant="outline"
                    >
                        Back to users
                    </Button>
                </Group>

                <Card>
                    <UserForm roles={roles} managers={managers} status="create" />
                </Card>
            </Container>
        </AppLayout>
    );
}