import type {FunctionComponent} from 'react'

import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table'
import PageTitle from '@/components/custom/pageTitle'
import {getAllUsers} from '@/dal/users'
import RoleColumn from '@/app/(authenticated)/(admin)/users/roleColumn'

const AdminPage: FunctionComponent = async () => {
  const users = await getAllUsers()

  return (
    <>
      <PageTitle>User management</PageTitle>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Username</TableHead>
            <TableHead>Role</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {users.map(user => (
            <TableRow key={user.id}>
              <TableCell>{user.username}</TableCell>
              <TableCell>
                <RoleColumn user={user} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  )
}

export default AdminPage
