import Avatar from "@/src/components/general/avatar";
import { AppContext } from "@/src/pages/_app";
import Tag from "@/twui/components/elements/Tag";
import Row from "@/twui/components/layout/Row";
import Span from "@/twui/components/layout/Span";
import Stack from "@/twui/components/layout/Stack";
import { useContext } from "react";

export default function UsersList() {
    const { pageProps } = useContext(AppContext);
    const { deployment_users } = pageProps;

    return (
        <Stack className="grid-cell-content">
            {deployment_users?.map((dep_usr, index) => {
                const is_super_admin = Boolean(dep_usr.is_super_admin);

                return (
                    <a href={`/admin/users/${dep_usr.id}`} key={index}>
                        <Row className="w-full justify-between">
                            <Row>
                                <Avatar
                                    image_url={dep_usr.image}
                                    title={`${dep_usr.first_name} Image`}
                                    image_size={40}
                                />
                                <Span>
                                    {dep_usr.first_name} {dep_usr.last_name}
                                </Span>
                            </Row>
                            <Row>
                                {is_super_admin ? <Tag>Super Admin</Tag> : null}
                            </Row>
                        </Row>
                    </a>
                );
            })}
        </Stack>
    );
}
