import FormShell from "@/components/app/FormShell"
import PageHeader from "@/components/app/PageHeader"
import PageShell from "@/components/app/PageShell"
import { Button } from "@/components/ui/button"
import UserForm from "@/features/users/components/UserForm"

import { getAllRoles } from "@/features/roles/service"
import type { Role } from "@/features/roles/types"

export default async function CreateUserPage() {
  const roles = await getAllRoles()
  const availableRoles = roles.map((r: Role) => ({ id: r.id, name: r.name }))

  return (
    <PageShell>
      <PageHeader
        title="Add User"
        actions={
          <Button asChild variant="secondary">
            <a href="/users">Back</a>
          </Button>
        }
      />
      <FormShell>
        <UserForm availableRoles={availableRoles} />
      </FormShell>
    </PageShell>
  )
}