1import { FC } from "react";
 2import { FormLabel, Switch } from '@marzneshin/common/components';
 3import { useTranslation } from 'react-i18next';
 4import { DataLimitField, DataLimitResetStrategyField } from "../../fields";
 5import { useDataLimit } from "./use-data-limit";
 6
 7export const DataLimitFields: FC = () => {
 8    const { t } = useTranslation();
 9    const { isDataLimitEnabled, setIsDataLimitEnabled } = useDataLimit();
10
11    return (
12        <div className="my-2">
13            <FormLabel className="hstack justify-between items-center text-md my-2" >
14                {t('page.users.data_limit_method')}
15                <Switch
16                    checked={isDataLimitEnabled}
17                    onCheckedChange={() => setIsDataLimitEnabled(!isDataLimitEnabled)}
18                />
19            </FormLabel>
20            {isDataLimitEnabled && (
21                <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
22                    <div className="flex gap-2 items-center w-full">
23                        <DataLimitField />
24                        <DataLimitResetStrategyField />
25                    </div>
26                </div>
27            )}
28        </div>
29    );
30};