import Avatar from "@/src/components/general/avatar";
import { NSQLITE_TURBOCI_ADMIN_USERS } from "@/src/db/types";
import { AppContext } from "@/src/pages/_app";
import LucideIcon from "@/twui/components/elements/lucide-icon";
import Tag from "@/twui/components/elements/Tag";
import Button from "@/twui/components/layout/Button";
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";
import DeleteDeplotmentUserButton from "../deployment-user/(partials)/delete-deployment-user-button";

type Props = {
    dep_usr: NSQLITE_TURBOCI_ADMIN_USERS;
};

export default function UsersListCard({ dep_usr }: Props) {
    const { pageProps } = useContext(AppContext);

    const is_super_admin = Boolean(dep_usr.is_super_admin);

    return (
        <a href={`/admin/users/${dep_usr.id}`}>
            <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>
                    <Button
                        title="Edit User"
                        size="smaller"
                        variant="ghost"
                        beforeIcon={<LucideIcon name="Edit3" size={17} />}
                    />

                    {is_super_admin ? (
                        <Tag>Super Admin</Tag>
                    ) : (
                        <>
                            <DeleteDeplotmentUserButton
                                dep_user={dep_usr}
                                target={
                                    <Button
                                        title="Delete User"
                                        size="smaller"
                                        variant="ghost"
                                        beforeIcon={
                                            <LucideIcon
                                                name="Trash"
                                                size={17}
                                            />
                                        }
                                    />
                                }
                            />
                        </>
                    )}
                </Row>
            </Row>
        </a>
    );
}
