1import { Button } from "@marzneshin/components";
 2import { cn } from "@marzneshin/utils";
 3import { UserType, useUserStatusEnable } from "@marzneshin/features/users";
 4import { LoaderIcon } from "lucide-react";
 5import { FC, useCallback, useState } from "react";
 6import { useTranslation } from "react-i18next";
 7
 8interface UserStatusEnableButtonProps {
 9    user: UserType;
10}
11
12export const UserStatusEnableButton: FC<UserStatusEnableButtonProps> = ({ user }) => {
13    const [userStatus, setUserStatus] = useState<boolean>(user.enabled)
14    const { t } = useTranslation()
15    const { mutate: userStatusEnable, isPending } = useUserStatusEnable()
16
17    const handleUserStatusEnabledToggle = useCallback(() => {
18        const tempUserStatus = userStatus;
19        userStatusEnable({ user: user, enabled: !userStatus })
20        setUserStatus(!tempUserStatus)
21    }, [user, userStatus, userStatusEnable]);
22
23    const bgColor = isPending ? 'bg-muted-foreground' : (userStatus ? 'bg-red-400' : 'bg-green-400')
24
25    return (
26        <Button
27            className={cn(bgColor, "w-1/2")}
28            onClick={handleUserStatusEnabledToggle}
29        >
30            {isPending ? <LoaderIcon className="animate-spin" /> : t(!userStatus ? 'enable' : 'disable')}
31        </Button>
32    )
33}